/**
* Gallery-carousel.css
*/

.gallery-carousel {
    margin-top: var(--section-gap);
    padding: var(--section-gap) 0;
    padding-bottom: 8rem;
    position: relative;
    background-color: var(--clr-primary);
 }
 .gallery-carousel h2 {
    color: var(--clr-text-light);
    text-align: center;
    text-wrap: balance;
 }
 .gallery-carousel .tinyMCE-wrapper {
     margin-bottom: 3rem;
     margin-left: auto;
     margin-right: auto;
     max-width: 800px;
 }
 
 .gallery-carousel .gallery-img-link,
 .gallery-carousel .gallery-img-link img { 
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
    width: 90vw;
    /* height: 13vw; */
    aspect-ratio: 16/9;
    object-fit: cover;
 }
 
 .gallery-carousel .card {
    position: relative;
 }
 .gallery-carousel .description-wrapper {
    position: absolute;
    bottom: 20px;
    left: 1rem;
    padding: 1rem;
    background-color: rgb(0, 0, 0, 30%);
    width: calc(100% - 2rem);
    color: var(--clr-text-light);
 }
 .gallery-carousel .description-wrapper p {
    margin: 0;
    padding: 0;
 }

@media only screen and (max-width: 699px) {
    .gallery-carousel .gallery-img-link,
    .gallery-carousel .gallery-img-link img { 
       width: 100%;
    }
    .gallery-carousel .description-wrapper {
        /* left: 2.7rem;
        width: calc(90vw - 2rem - 2rem); */
     }
 }
 
 .gallery-carousel .gc-btn {
     position: absolute;
     /* top: 50%; */
     /*bottom: 6.5vw; /* Half of img height to center buttons on slides not entire section */
     border-radius: 12rem;
     border-color: transparent;
     width: 3rem;
     height: 3rem;
     font-size: 3rem;
     line-height: 0;
     color: var(--clr-text-light);
     background-color: rgb(200, 200, 200, 0.5);
     backdrop-filter: blur(6px);
     display: flex;
     justify-content: center;
     align-items: center;
 }
 .gallery-carousel .gc-btn-l {
     /* right: calc(8rem + 5vw); */
     left: calc(50vw);
     /* left: 50%; */
     transform: translate(-150%, 50%); */
 }
 .gallery-carousel .gc-btn-r {
     /* right: calc(3rem + 5vw); */
     /* left: calc(50vw); */
     right: 50%;
     /* left: 50%; */
     transform: translate(150%, 50%); */
 }
 
 @media only screen and (min-width: 1200px) {
     .gallery-carousel .gallery-img-link,
     .gallery-carousel .gallery-img-link img { 
         margin-left: auto;
         margin-right: auto;
         width: 25vw;
         height: 13vw;
         aspect-ratio: 16/9;
         object-fit: cover;
     }
 }
 @media only screen and (min-width: 1200px) {
     .gallery-carousel .gallery-img-link,
     .gallery-carousel .gallery-img-link img { 
         margin-left: auto;
         margin-right: auto;
         padding: 0 1rem;
         width: 25vw;
         height: 13vw;
         aspect-ratio: 16/9;
         object-fit: cover;
     }
 }