.carousel {
  .cards {
    & ul {
      /* height: clamp(500px, 75vh, 750px); */
      margin-top: 25px;
      padding-bottom: 25px;

      & li {
        height: initial;
        /* display: grid; */
        /* flex: 0 0 100%; */

        @media (min-width: 1080px) {
          /* flex: 1 1 600px; */
        }

        .card {
          transition: all var(--animation-speed);
          --card-header-height: calc(200px + 5vw);
          display: grid;
          grid-template-rows: var(--card-header-height) auto;
          /* grid-auto-rows: 0.25fr auto; */
          border: 3px solid var(--color-brown);
          text-align: center;
          position: relative;
          background-color: var(--color-ivory);
          color: var(--color-brown);
          /* scroll-snap-align: center; */
          /* width: 100%; */
          height: 100%;

          @media (min-width: 1080px) {
            /* width: 600px; */
          }

          .card-header img {
            width: 100%;
            height: auto;
            object-fit: cover;
            max-height: var(--card-header-height);
          }
          .card-body {
            padding: 1rem;
          }
          .btn {
            position: absolute;
            left: 50%;
            bottom: -1.5rem;
            transform: translateX(-50%);
          }
        }
        .card-blog {
          transition: all var(--animation-speed);
          display: grid;
          grid-auto-rows: 0.25fr auto;

          @media (min-width: 1080px) {
            /* width: 600px; */
          }
          .card-blog-header img {
            width: 100%;
            height: auto;
            object-fit: cover;
            max-height: 50vh;
          }
          .card-blog-body {
            padding: 1rem;
          }
        }
      }
      & li.glide__slide--active:has(.card, .card-blog) {
        /* box-shadow: 0px 0px 15px 0px lch(0 0 0 / .95); */
      }
    }
  }

  & nav {
    position: relative;
    height: 2rem;
    /* border: 1px solid; */
    display: flex;
    gap: 0.5rem;
    justify-content: space-evenly;
    align-items: center;
    margin: 1rem 0;

    .glide__arrows {
      position: absolute;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
    }
    .glide__bullets {
      z-index: 1;
    }
    
    .indicators {
      display: flex;
      gap: 0.5rem;
      & button {
        --btn-size: 15px;
        border: 2px solid var(--color-brown);
        width: var(--btn-size);
        height: var(--btn-size);
        border-radius: 50%;
      }
      & button.glide__bullet--active {
        background-color: var(--color-brown);
      }
    }

    .btn-carousel {
      background-color: transparent;
      border: 0;
      /* border: 1px solid; */
      color: var(--color-brown);
      font-size: 2rem;
      height: 2rem;
      width: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      &.left {
        /* position: absolute; */
        bottom: 1rem;
        left: 0;
      }
      &.right {
        /* position: absolute; */
        bottom: 1rem;
        right: 0;
      }

      @media (min-width: 1080px) {
        .left {
          /* position: absolute; */
          bottom: -0.5rem;
          left: -2rem;
        }
        .right {
          /* position: absolute; */
          bottom: -0.5rem;
          right: -2rem;
        }
      }
    }
  }
}