.room-catalog-grid {
  --room-card-mobile-width: 19.5rem;
  --room-card-desktop-width: 27.875rem;
  --room-card-accessible-size: 2.25rem;
  background: var(--dia-front-color-surface);
}
.room-catalog-grid__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dia-front-room-card-gap-mobile);
  width: min(100% - 2 * var(--dia-front-container-gutter), var(--room-card-mobile-width));
  margin: 0 auto;
  padding: 0 0 var(--dia-front-space-72);
  list-style: none;
}
.room-catalog-grid__card {
  min-width: 0;
  aspect-ratio: 312/279.23;
  overflow: clip;
  border-radius: var(--dia-front-radius-24);
  background: var(--dia-front-color-forest);
}
.room-catalog-grid__card[hidden] {
  display: none;
}
.room-catalog-grid__empty {
  width: min(100% - 2 * var(--dia-front-container-gutter), var(--room-card-mobile-width));
  margin: 0 auto var(--dia-front-space-72);
  padding: var(--dia-front-space-32) var(--dia-front-space-16);
  border-radius: var(--dia-front-radius-24);
  background: var(--dia-front-color-room-filter-empty);
  color: var(--dia-front-color-heading);
  font-family: var(--dia-front-font-body);
  font-size: var(--dia-front-font-size-body-small);
  font-weight: var(--dia-front-font-weight-body-medium);
  line-height: var(--dia-front-line-height-body);
  text-align: center;
}
.room-catalog-grid__empty[hidden] {
  display: none;
}
.room-catalog-grid__link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: clip;
  border-radius: inherit;
  color: var(--dia-front-color-white);
  text-decoration: none;
}
.room-catalog-grid__link:focus-visible {
  outline: none;
  box-shadow: var(--dia-front-focus-ring-inset);
}
.room-catalog-grid__image, .room-catalog-grid__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.room-catalog-grid__image {
  inset: calc(-1 * var(--dia-front-room-card-image-inset-mobile));
  width: calc(100% + var(--dia-front-room-card-image-inset-mobile) + var(--dia-front-room-card-image-inset-mobile));
  max-width: none;
  height: calc(100% + var(--dia-front-room-card-image-inset-mobile) + var(--dia-front-room-card-image-inset-mobile));
  object-fit: cover;
}
.room-catalog-grid__shade {
  background: var(--dia-front-gradient-room-card-scrim);
}
.room-catalog-grid__information {
  position: absolute;
  top: var(--dia-front-space-16);
  left: 50%;
  padding: var(--dia-front-space-8) var(--dia-front-space-12);
  border-radius: var(--dia-front-radius-24);
  background: var(--dia-front-color-white);
  color: var(--dia-front-color-heading);
  font-family: var(--dia-front-font-body);
  font-size: var(--dia-front-font-size-body-small);
  line-height: var(--dia-front-line-height-body);
  white-space: nowrap;
  transform: translateX(-50%);
}
.room-catalog-grid__accessible {
  position: absolute;
  top: var(--dia-front-space-16);
  right: var(--dia-front-space-16);
  display: grid;
  width: var(--room-card-accessible-size);
  height: var(--room-card-accessible-size);
  border-radius: 50%;
  background: var(--dia-front-color-mint);
  place-items: center;
}
.room-catalog-grid__accessible img {
  width: var(--dia-front-space-24);
  height: var(--dia-front-space-24);
}
.room-catalog-grid__content {
  position: absolute;
  right: var(--dia-front-space-32);
  bottom: var(--dia-front-room-card-padding-mobile-block);
  left: var(--dia-front-space-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dia-front-space-16);
  text-align: center;
  text-shadow: var(--dia-front-shadow-text-media);
}
.room-catalog-grid__title {
  font-family: var(--dia-front-font-heading);
  font-size: var(--dia-front-font-size-card-title-small);
  font-weight: var(--dia-front-font-weight-heading);
  line-height: var(--dia-front-line-height-room-card-title);
  overflow-wrap: normal;
}
.room-catalog-grid__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dia-front-space-16);
}
.room-catalog-grid__fact {
  display: inline-flex;
  align-items: center;
  gap: var(--dia-front-space-8);
  font-family: var(--dia-front-font-body-editorial-source);
  font-size: var(--dia-front-font-size-body-small);
  line-height: var(--dia-front-line-height-body);
  white-space: nowrap;
}
.room-catalog-grid__icon--mobile {
  display: block;
}
.room-catalog-grid__icon--desktop {
  display: none;
}

@media (min-width: 667px) {
  .room-catalog-grid__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100% - 2 * var(--dia-front-container-gutter), 2 * var(--room-card-mobile-width) + var(--dia-front-room-card-gap-mobile));
  }
}
@media (min-width: 992px) {
  .room-catalog-grid__information {
    top: var(--dia-front-space-32);
    font-size: var(--dia-front-font-size-body);
  }
  .room-catalog-grid__accessible {
    top: var(--dia-front-space-32);
    right: var(--dia-front-space-32);
    width: var(--dia-front-space-40);
    height: var(--dia-front-space-40);
  }
  .room-catalog-grid__empty {
    width: min(100% - 2 * var(--dia-front-container-gutter), var(--room-card-desktop-width));
    margin-bottom: var(--dia-front-space-144);
  }
  .room-catalog-grid__image {
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .room-catalog-grid__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dia-front-space-16);
    width: calc(100% - 4 * var(--dia-front-layout-grid-column-width));
    padding-bottom: var(--dia-front-space-144);
  }
  .room-catalog-grid__card {
    aspect-ratio: 446/408;
  }
  .room-catalog-grid__shade {
    opacity: var(--dia-front-room-card-scrim-desktop-opacity);
    transition: opacity 300ms ease-in;
  }
  .room-catalog-grid__content {
    bottom: var(--dia-front-space-32);
    gap: var(--dia-front-space-24);
    transition: transform 300ms ease-in;
  }
  .room-catalog-grid__title {
    font-size: var(--dia-front-font-size-card-title-large);
  }
  .room-catalog-grid__fact {
    font-family: var(--dia-front-font-body);
    font-size: var(--dia-front-font-size-body);
    font-weight: 700;
  }
  .room-catalog-grid__icon--mobile {
    display: none;
  }
  .room-catalog-grid__icon--desktop {
    display: block;
  }
}
@media (min-width: 1440px) {
  .room-catalog-grid__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .room-catalog-grid__image {
    transition: transform 300ms ease-in;
  }
  .room-catalog-grid__link:is(:hover, :focus-visible) .room-catalog-grid__image {
    transform: scale(1.063);
  }
  .room-catalog-grid__link:is(:hover, :focus-visible) .room-catalog-grid__shade {
    opacity: 1;
  }
  .room-catalog-grid__link:hover .room-catalog-grid__content {
    transform: translateY(calc(-1 * var(--dia-front-space-16)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .room-catalog-grid__image, .room-catalog-grid__shade, .room-catalog-grid__content {
    transition: none;
  }
}