@layer components
{
  .card-carousel {
    position: relative;
    container-type: inline-size;
  }
  .card-carousel__name {
    margin: 0 0 40px;
    padding: 0;
    color: var(--il-blue);
    font: 700 normal 32px/40px var(--il-font-sans);
  }
  .card-carousel__main {
    position: relative;
  }


  .card-carousel__items {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .card-carousel__item {
    container-type: inline-size;
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
  }
  .card-carousel__item--active {
    display: block;
  }




  /* Cards */

  .card-carousel__card {
    position: relative;
    display: grid;
    grid-gap: 14px;
  }
  .card-carousel__card__image-grid {
    grid-area: image-grid;
    position: relative;
    display: grid;
    grid-gap: 14px;
  }
  .card-carousel__card__image-grid__image {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
  }
  .card-carousel__card__image-grid__image:nth-child(4) {
    display: none;
  }
  .card-carousel__card--layout-5 .card-carousel__card__image-grid__image:nth-child(4) {
    display: block;
  }
  .card-carousel__card__image-grid__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @container (max-width: 479px) {
    .card-carousel__card {
      grid-template-rows: 1fr 3fr;
      grid-template-areas: "image-grid" "flip-card";
    }
    .card-carousel__card__image-grid {
      grid-template-columns: 1fr 1fr 1fr;
    }
    .card-carousel__card__image-grid__image {
      height: 33cqw;
    }
    .card-carousel__card--layout-5 .card-carousel__card__image-grid {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .card-carousel__card--layout-5 .card-carousel__card__image-grid__image {
      height: 25cqw;
    }
  }

  @container (min-width: 480px) and (max-width: 774px) {
    .card-carousel__card {
      grid-template-columns: 3fr 1fr;
      grid-template-rows: auto;
      grid-template-areas: "flip-card image-grid";
    }
    .card-carousel__card__image-grid {
      grid-template-columns: auto;
      grid-template-rows: 1fr 1fr 1fr;
    }
    .card-carousel__card--layout-5 .card-carousel__card__image-grid {
      grid-template-rows: 1fr 1fr 1fr 1fr;
    }
    .card-carousel__card__image-grid__image {
      height: 20cqw;
    }
    .card-carousel__card--layout-5 .card-carousel__card__image-grid__image {
      height: 14.52cqw;
    }
  }
  @container (min-width: 775px) {
    .card-carousel__card {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      grid-template-areas: "flip-card image-grid";
    }
    .card-carousel__card__image-grid {
      height: 50cqw;
    }
    .card-carousel__card__image-grid {
      grid-template-columns: 1fr 2fr;
      grid-template-rows: 3fr 4fr;
    }
    .card-carousel__card__image-grid__image:nth-child(1) {
      grid-column: 1 / span 2;
    }
    .card-carousel__card--layout-2 .card-carousel__card__image-grid {
      grid-template-columns: 2fr 1fr;
      grid-template-rows: 3fr 4fr;
    }
    .card-carousel__card--layout-2 .card-carousel__card__image-grid__image:nth-child(1) {
      grid-column: 1 / span 2;
    }
    .card-carousel__card--layout-3 .card-carousel__card__image-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 3fr 4fr;
    }
    .card-carousel__card--layout-3 .card-carousel__card__image-grid__image:nth-child(1) {
      grid-column: 1 / span 1;
    }
    .card-carousel__card--layout-3 .card-carousel__card__image-grid__image:nth-child(2) {
      grid-column: 2;
      grid-row: 1 / span 2;
    }
    .card-carousel__card--layout-4 .card-carousel__card__image-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 3fr 4fr;
    }
    .card-carousel__card--layout-4 .card-carousel__card__image-grid__image:nth-child(1) {
      grid-column: 1;
      grid-row: 1 / span 2;
    }
    .card-carousel__card--layout-4 .card-carousel__card__image-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 3fr 4fr;
    }
    .card-carousel__card--layout-4 .card-carousel__card__image-grid__image:nth-child(1) {
      grid-column: 1;
      grid-row: 1 / span 2;
    }
    .card-carousel__card--layout-4 .card-carousel__card__image-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 3fr 4fr;
    }
    .card-carousel__card--layout-4 .card-carousel__card__image-grid__image:nth-child(1) {
      grid-column: 1;
      grid-row: 1 / span 2;
    }
    .card-carousel__card--layout-5 .card-carousel__card__image-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 3fr 1fr 3fr;
    }
    .card-carousel__card--layout-5 .card-carousel__card__image-grid__image:nth-child(1) {
      grid-column: 1;
      grid-row: 1 / span 2;
    }
    .card-carousel__card--layout-5 .card-carousel__card__image-grid__image:nth-child(2) {
      grid-column: 2;
      grid-row: 1;
    }
    .card-carousel__card--layout-5 .card-carousel__card__image-grid__image:nth-child(3) {
      grid-column: 1;
      grid-row: 3;
    }
    .card-carousel__card--layout-5 .card-carousel__card__image-grid__image:nth-child(4) {
      grid-column: 2;
      grid-row: 2 / span 2;
    }

    .card-carousel__card__image-grid__image {
      height: 100%;
    }
  }


  .card-carousel__card__flip-card {
    grid-area: flip-card;
    position: relative;
    height: 100%;
    width: 100%;
    transition: transform .4s;
    transform-style: preserve-3d;
  }
  .card-carousel--cards-flipped .card-carousel__card__flip-card {
    transform: rotateY(180deg);
  }
  .card-carousel__card__flip-card-front,
  .card-carousel__card__flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .card-carousel__card__flip-card-front {
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
  }
  .card-carousel__card__flip-card-back {
    border-radius: 4px;
    background-color: white;
    transform: rotateY(180deg);
    padding: 80px 80px 0 13px;
    overflow: auto;
  }

  .card-carousel__card__flip-card__image {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: white;
  }
  .card-carousel__card__flip-card__image img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .card-carousel__toggle {
    position: absolute;
    right: 17px;
    top: 17px;
    border: 2px solid var(--il-blue);
    display: block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    padding: 0;
    text-indent: 110%;
    white-space: nowrap;
    background: white url('https://cdn.brand.illinois.edu/illinois.edu/info-blue.svg') center no-repeat;
    background-size: 50px 50px;
    cursor: pointer;
  }

  .card-carousel__card__flip-card-front:focus-visible .card-carousel__toggle,
  .card-carousel__toggle:focus-visible {
    background-color: var(--il-arches-90);
  }

  .card-carousel__toggle:hover {
    border-color: var(--il-orange);
    background-color: var(--il-orange);
    background-image: url('https://cdn.brand.illinois.edu/illinois.edu/info-white.svg');
  }

  .card-carousel__card__flip-card-back .card-carousel__toggle {
    background-size: 44px 44px;
    background-image: url('https://cdn.brand.illinois.edu/icons/solid/blue/exit.svg');
  }

  .card-carousel__card__flip-card-back .card-carousel__toggle:hover {
    background-image: url('https://cdn.brand.illinois.edu/icons/solid/white/exit.svg');
  }





  /* Back panel content */


  .card-carousel__card__title {
    margin: 0 0 15px;
    font: 600 28px/36px var(--il-font-sans);
  }

  .card-carousel__card__body {
    font: 400 18px/30px var(--il-font-sans);
  }

  .card-carousel__card__body ul {
    list-style: none;
    margin-top: 40px;
    margin-left: 0;
    padding-left: 0;
  }
  .card-carousel__card__body li {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
  }
  .card-carousel__card__body li a {
    font-weight: bold;
    color: var(--il-industrial);
  }
  .card-carousel__card__body li a:hover,
  .card-carousel__card__body li a:focus-visible {
    color: var(--il-blue);
  }


  a.card-carousel__card__link {
    display: block;
    position: relative;
    box-sizing: border-box;
    max-width: 400px;
    margin: 24px 0 0;
    padding: 0 0 0 34px;
    border: 0;
    font: 700 20px/26px var(--il-font-sans);
    text-decoration: underline;
    color: var(--il-industrial);
  }
  a.card-carousel__card__link:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: var(--il-orange) url('https://cdn.brand.illinois.edu/illinois.edu/arrow/right/white.svg') center center no-repeat;
    border: 0;
    border-radius: 50%;
    background-size: 20px 20px;
    transition: transform 0.25s;

  }
  a.card-carousel__card__map-link:before {
    background-size: 36px 36px;
    background-color: transparent;
    background-image: url('https://cdn.brand.illinois.edu/icons/solid/orange/location.svg');
    transition: none;
  }

  a.card-carousel__card__link:hover:before{
    background: url(../assets/right-chevron-white-bg.svg) center no-repeat;
    transform: translateX(6px);
  }
  a.card-carousel__card__map-link:hover:before{
    transform: none;
    background-size: 36px 36px;
    background-image: url('https://cdn.brand.illinois.edu/icons/solid/blue/location.svg');
  }

  a.card-carousel__card__link:focus-visible {
    background-color: var(--il-arches-90);
    border-bottom: 3px solid var(--il-blue);
    color: var(--il-blue);
    text-decoration: none;
  }

  a.card-carousel__card__link:focus-visible:before{
    background: url(../assets/right-chevron-focus.svg) center no-repeat;
  }
  a.card-carousel__card__map-link:focus-visible:before{
    background-size: 36px 36px;
    background-image: url('https://cdn.brand.illinois.edu/icons/solid/blue/location.svg');
  }

  a.card-carousel__card__link:hover {
    color: var(--il-blue);
    text-decoration: underline;
  }

@media (prefers-reduced-motion: reduce) {
  a.card-carousel__card__link:before {
    transition: none;
    transform: none;
  }
}



  /* Images */
  .card-carousel__card__image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .card-carousel__card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }



  /* Navigation */
  .card-carousel__nav {
    margin: 40px 0 0;
  }
  .card-carousel__nav__previous-button,
  .card-carousel__nav__next-button {
    display: none;
  }
  .card-carousel__nav__cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  .card-carousel__nav__card {
    all: initial;
    box-sizing: border-box;
    display: block;
    position: relative;
    height: 40px;
    padding: 0 10px;
    font: 700 19px/36px var(--il-font-sans);
    cursor: pointer;
    border-radius: 4px;
    border: 2px solid var(--il-storm-lighter-4);
    background-color: var(--il-storm-lighter-4);
    color: var(--il-blue);
    text-decoration: none;
  }

  .card-carousel__nav__card:focus-visible {
    border-color: var(--il-blue);
    background-color: var(--il-arches-90);
    color: var(--il-blue);
  }

  .card-carousel__nav__card:hover {
    text-decoration: underline;
    border-color: var(--il-orange);
    color: var(--il-orange);
  }

  .card-carousel__nav__card.active {
    border-color: var(--il-orange);
    background-color: var(--il-orange);
    color: white;
  }

  .card-carousel__nav__card.active:focus-visible {
    border-color: var(--il-blue);
    background-color: var(--il-arches-90);
    color: var(--il-blue);
  }

  @container (min-width: 600px) {
    .card-carousel__nav {
      display: grid;
      grid-template-columns: 40px auto 40px;
      grid-gap: 20px;
      background-color: var(--il-storm-lighter-4);
    }

    .card-carousel__nav__next-button,
    .card-carousel__nav__previous-button {
      display: block;
      box-sizing: border-box;
      position: relative;
      width: 40px;
      height: 40px;
      overflow: hidden;
      border-radius: 4px;
      border: 2px solid var(--il-blue);
      background-color: var(--il-blue);
      color: white;
      cursor: pointer;
      text-indent: 50px;
      white-space: nowrap;
      background-size: 20px 20px;
      background-repeat: no-repeat;
      background-position: center;
    }

    .card-carousel__nav__previous-button {
      background-image: url('https://cdn.brand.illinois.edu/illinois.edu/arrow/left/white.svg');
    }

    .card-carousel__nav__next-button {
      background-image: url('https://cdn.brand.illinois.edu/illinois.edu/arrow/right/white.svg');
    }

    .card-carousel__nav__next-button:hover,
    .card-carousel__nav__previous-button:hover {
      background-color: white;
    }

    .card-carousel__nav__next-button:focus-visible,
    .card-carousel__nav__previous-button:focus-visible {
      background-color: var(--il-arches-90);
    }

    .card-carousel__nav__previous-button:hover,
    .card-carousel__nav__previous-button:focus-visible {
      background-image: url('https://cdn.brand.illinois.edu/illinois.edu/arrow/left/blue.svg');
    }

    .card-carousel__nav__next-button:hover,
    .card-carousel__nav__next-button:focus-visible {
      background-image: url('https://cdn.brand.illinois.edu/illinois.edu/arrow/right/blue.svg');
    }

    .card-carousel__nav__cards {
      width: 100%;
      flex-wrap: nowrap;
      overflow: hidden;
    }
    .card-carousel__nav__card {
      white-space: nowrap;
    }
  }
}