@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap");
/* @import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"); */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111;
  transition: 0.5s;
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

body:has(.box[data-color="clr1"]:hover) {
  background: #754ffe;
}
body:has(.box[data-color="clr2"]:hover) {
  background: #301a15;
}
body:has(.box[data-color="clr3"]:hover) {
  background: #1b2a32;
}

section {
  overflow: hidden;
  padding-top: 3em;
}

h2 {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  font-size: clamp(2rem, 1rem + 4vw, 5rem);
  text-align: center;
  line-height: 1.3;
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 3.25em 0 3em;

  .box {
    position: relative;
    width: 18.75rem;
    height: 18.75rem;
    border-radius: 0.625rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;

    .imgBox {
      position: absolute;
      inset: 0;
      border-radius: 0.75rem;
      border: 0.25rem solid rgba(0, 0, 0, 0.2);

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.5s;
        border-radius: 0.625rem;
      }
    }

    .glass {
      position: absolute;
      inset: 0;
      background: linear-gradient(#fff2, transparent);
      border: 0.063rem solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 0.938rem 0.938rem rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(0.938rem);
      border-radius: 0.625rem;
      overflow: hidden;
      scale: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 0.5s;
      opacity: 0;

      &:before {
        position: absolute;
        content: "";
        bottom: 0;
        width: 100%;
        height: 2.5rem;
        background: rgba(255, 255, 255, 0.05);
      }

      h3 {
        font-size: 1.25rem;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        text-align: center;
        line-height: 0.8em;
        font-weight: 500;
      }

      span {
        font-size: 0.5em;
        font-weight: 400;
      }

      ul {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 1rem;

        a {
          color: #fff8;
          font-size: 1.25rem;
          scale: 0;
          transition: 0.25s;
          transition-delay: scale calc(0.2s * var(--i));

          &:hover {
            color: #fff;
          }
        }
      }
    }
    &:hover .imgBox img {
      opacity: 0.5;
    }

    &:hover {
      transform: rotate(-15deg);
    }

    &:hover .glass {
      transform: rotate(20deg);
      scale: 1;
      opacity: 1;
    }

    &:hover ul a {
      scale: 1;
    }
  }
}