html body {
  height: 100%;
  overflow: hidden;
}

.carousel {
  padding-top: 10%;
  padding-bottom: 10%;
}
 

 /* Caption text corresponds with the class="test" element on the courel */
  .text {
    color: black;
    font-size: 40px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: left;
    }

    @media screen and (min-width: 280px) {
      .text {
        font-size: 20px;
      }
    
      .fourthirthysize {
        width: 280px;
        height: 653px;
        object-fit: cover;
      }
      #carouselExample {
        display: block;
      }
      }
      @media screen and (min-width: 375px) {

        .fourthirthysize {
        width: 375px;
        height: 667px;
        object-fit: cover;
      }

      #carouselExample {
        display: block;
      }
        
      }

      @media screen and (min-width: 360px) {
      .text {
        font-size: 20px;
      }
    
      .fourthirthysize {
        width: 360px;
        height: 740px;
        object-fit: cover;
      }
      }

      @media screen and (min-width: 390px) {
      .text {
        font-size: 20px;
      }
    
      .fourthirthysize {
        width: 390px;
        height: 844px;
        object-fit: cover;
      }
      }
    
      @media screen and (min-width: 414px) {

        .fourthirthysize {
        width: 414px;
        height: 896px;
        object-fit: cover;
      }
        
      }
      @media screen and (min-width: 412px) {
      .text {
        font-size: 20px;
      }
    
      .fourthirthysize {
        width: 412px;
        height: 915px;
        object-fit: cover;
      }
      }
      @media screen and (min-width: 430px) {
      .text {
        font-size: 20px;
      }
    
      .fourthirthysize {
        width: 430px;
        height: 932px;
        object-fit: cover;
      }
      }

      @media screen and (min-width: 768px) {
      .text {
        font-size: 20px;
      }
    
      .fourthirthysize {
        width: 768px;
        height: 1024px;
        object-fit: cover;
      }
      }

      @media screen and (min-width: 820px) {
      .text {
        font-size: 20px;
      }
    
      .fourthirthysize {
        width: 820px;
        height: 1180px;
        object-fit: cover;
      }
      }
      @media screen and (min-width: 912px) {
      .text {
        font-size: 20px;
      }
    
      .fourthirthysize {
        width: 912px;
        height: 1368px;
        object-fit: cover;
      }
      #carouselExample {
        display: block;
      }
      }

      @media screen and (min-width: 1024px) {
      .text {
        font-size: 20px;
      }
    
      .fourthirthysize {
        width: 1024px;
        height: 100;
        object-fit: cover;
      }
      #carouselExample {
        display: block;
      }
      }

/* BOOTSTRAP BREAKPOINTS */

        /* --bs-breakpoint-xs: 0; */

        /* @media screen and (min-width: 1024px) {
      .text {
        font-size: 20px;
      }
    } */

      
        /* --bs-breakpoint-sm: 576px; */


         /* @media screen and (min-width: 1024px) {
      .text {
        font-size: 20px;
      }
    } */
        /* --bs-breakpoint-md: 768px; */


         /* @media screen and (min-width: 1024px) {
      .text {
        font-size: 20px;
      }
    } */
        /* --bs-breakpoint-lg: 992px; */

         /* @media screen and (min-width: 1024px) {
      .text {
        font-size: 20px;
      }
    } */

        /* --bs-breakpoint-xl: 1200px; */

         /* @media screen and (min-width: 1024px) {
      .text {
        font-size: 20px;
      }
    } */
        /* --bs-breakpoint-xxl: 1400px; */