.chefs {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background-color: var(--base-600);
}

.chefs-avatars {
  display: flex;
  justify-content: center;
  align-items: center;
  width: max-content;
  height: 100px;
}

.chefs-avatar {
  position: relative;
  width: 70px;
  height: 70px;
  padding: 5px;
  cursor: pointer;
  filter: saturate(0);
  will-change: width, height;
}

.chefs-avatar img {
  border-radius: 0.35rem;
}

.chefs-names {
  position: relative;
  width: 100%;
  height: clamp(4rem, 11vw, 18rem);
  overflow: hidden;
}

.chefs-name {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.chefs-name h1 {
  white-space: nowrap;
  text-align: center;
  line-height: 0.9;
  color: var(--base-100);
}

.chefs-name h1 .letter {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

.chefs-name--default h1 .letter {
  transform: translateY(0%);
}

.chefs .section-footer p {
  color: var(--base-300);
}

@media (max-width: 999px) {
  .chefs {
    flex-direction: column-reverse;
    gap: 2rem;
  }

  .chefs-avatars {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 90%;
    height: auto;
  }

  .chefs-avatar {
    width: 60px;
    height: 60px;
    padding: 2.5px;
    cursor: default;
  }

  .chefs-names {
    height: 4rem;
  }

  .chefs-name {
    display: none;
  }

  .chefs-name--default {
    display: flex;
  }

  .chefs-name--default h1 .letter {
    transform: translateY(0%) !important;
  }

  .chefs-name h1 {
    font-size: 3rem;
  }
}