@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

@import "https://unpkg.com/open-props" layer(design.system);

@layer demo {
  fieldset {
    grid-template-columns:
      var(--col-1, 1fr)
      var(--col-2, 1fr)
      var(--col-3, 1fr)
      var(--col-4, 1fr)
      var(--col-5, 1fr);

    @media (prefers-reduced-motion: no-preference) {
      transition: grid-template-columns 2s var(--ease-spring-5);
    }

    &:has(label:nth-child(1) > input:checked) {
      --col-1: 5fr;
      --col-2: 3fr;
    }
    &:has(label:nth-child(2) > input:checked) {
      --col-1: 2fr;
      --col-2: 5fr;
      --col-3: 2fr;
    }
    &:has(label:nth-child(3) > input:checked) {
      --col-2: 2fr;
      --col-3: 5fr;
      --col-4: 2fr;
    }
    &:has(label:nth-child(4) > input:checked) {
      --col-3: 2fr;
      --col-4: 5fr;
      --col-5: 2fr;
    }
    &:has(label:nth-child(5) > input:checked) {
      --col-4: 3fr;
      --col-5: 5fr;
    }

    > label {
      background-image: var(--_img);
      background-position: center;
      background-size: cover;
    }
  }
}

@layer demo.support {

  fieldset {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: 50vh;
    gap: var(--size-3);
    border: none;

    > label {
      cursor: pointer;
      border-radius: var(--radius-4);

      &:focus-within {
        outline: 1px solid #fff;
        outline-offset: 5px;
      }

      > input {
        opacity: 0;
      }
    }
  }
}

body {
  font-family: 'Work Sans', sans-serif;
  padding-top: 8rem;
}

:root {
  --bs-dark: #1a191c;
  --bs-dark-rgb: 26, 25, 28;
}

.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.img-hover-zoom {
  overflow: hidden; /* Removing this will break the effects */
}

.img-hover-zoom a img {
  transition: transform .5s ease;
}

.img-hover-zoom:hover a img {
  transform: scale(1.5);
}

.img-hover-zoom--empty {
  background-color: rgba(255, 255, 255, .1);
  border-width: 0;
}

.img-hover-zoom:not(.img-hover-zoom--empty):hover {
  filter: drop-shadow(0 0 10px rgba(0,0,0,.3));
}

.gslide-title {
    color: var(--bs-light)!important;
}

.gslide-description {
    background-color: var(--bs-dark)!important;
}