*,*::after, *::before {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
          background-color: rgb(241 245 249);
        }

        main {
          width: 100vw;
          height: 100vh;
          flex-direction: row;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
        }

        #carouselExampleCaptions {
          width: 80vw;
          height: 100%;

          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .carousel-inner {
            width: 100%;
        }

        .new {
            position: absolute;
            top: 10px;
            right: 10px;
            display: inline;
        }

        /* Controls */
        i.fa-arrow-right,
        i.fa-arrow-left {
          background: none;
          border: 2px solid #ffc107;
          color: black;
          padding: 10px;
          border-radius: 100%;
          transition: background .6s ease;
        }

        .control-btn  {
            position: absolute;
            top: -1em;
            right: 5em;
        }

        .carousel-item .card {
            height: 20em;
            height: fit-content;
        }

        .control-btn i.fa-arrow-left {
            position: absolute;
            right: 6em;
        } 

        i.fa-arrow-right:hover,
       i.fa-arrow-left:hover {
          background: #ffc107;
          color: black;
        }

        .carousel-control-next {
            margin: 0 3em;
        }

        /* Indicators */

        .carousel-indicators [data-bs-target] {
          width: 10px;
          height: 10px;
          border-radius: 100%;
          border: 2px solid #ffc107;
        }

        .carousel-indicators .active {
            opacity: 1;
            background-color:  #ffc107;
        }

      @media screen and (max-width: 900px){
        #carouselExampleCaptions {
          width: 70vw;
          height: 70vw;
        }

        .card img {
            width: 100%;
        }

        .card .name {
          margin-top: 1em;
            font-size: 1em;
            font-weight: 700;
        }

        .card .role {
            font-size: 0.8em;
        }

        .card .work-at {
            font-size: 0.6em;
        }
        }
      
      @media screen and (max-width: 576px) {
        #carouselExampleCaptions {
          width: 70vw;
          height: 70vh;
        }
        
    .carousel-item .card .card-body {
       position: absolute;
       bottom: 20px;
       left: 10px;
       background-color: rgba(255, 255, 255, 0.9);
       border-radius: 10px;
     }

 }