.fy-rooms {
  background: var(--fy-ivory);
}
.fy-rooms__img {
  transition:
    transform 0.6s var(--fy-ease),
    filter 0.6s var(--fy-ease);
}
.fy-rooms__card:hover .fy-rooms__img {
  transform: scale(1.05);
  filter: brightness(1.05);
}
.fy-rooms__shade {
  background: linear-gradient(
    to top,
    color-mix(in oklch, var(--fy-charcoal) 70%, transparent),
    transparent 55%
  );
}
.fy-rooms__chip {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  color: white;
  background: oklch(1 0 0 / 0.15);
  border: 1px solid oklch(1 0 0 / 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition:
    background-color 0.3s var(--fy-ease),
    border-color 0.3s var(--fy-ease),
    color 0.3s var(--fy-ease);
}
@container (width >= 64rem) {
  .fy-rooms__chip {
    top: 1.25rem;
    right: 1.25rem;
    width: 3rem;
    height: 3rem;
  }
}
.fy-rooms__card:hover .fy-rooms__chip {
  background: var(--fy-gold);
  border-color: var(--fy-gold);
  color: var(--fy-charcoal);
}
.fy-rooms__line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--fy-ease);
}
.fy-rooms__card:hover .fy-rooms__line,
.fy-rooms__card:focus-visible .fy-rooms__line {
  transform: scaleX(1);
}
@media (hover: none) {
  .fy-rooms__line {
    transform: scaleX(1);
  }
}
.fy-rooms__card:focus-visible {
  outline: 2px solid var(--fy-gold);
  outline-offset: 2px;
}