/* Homepage refinement: monthly promotion and equal photography grid. */
.action-banner.action-banner-soft {
  display: none !important;
}

.photo-grid {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 12px !important;
}

.photo-grid .photo-tile,
.photo-grid .photo-tile.large,
.photo-grid .photo-tile.wide-right,
.photo-grid .photo-tile.business-tile,
.photo-grid .photo-tile.children-tile,
.photo-grid .photo-tile.iris-tile {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 5;
  border-radius: 0 !important;
  overflow: hidden;
  background: #151515;
}

.photo-grid .photo-tile img {
  filter: grayscale(.35) saturate(.72) contrast(1.03) brightness(.9);
  transform: scale(1.001);
  transition: filter .5s ease, transform .6s ease, box-shadow .6s ease;
}

.photo-grid .photo-tile::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .06) 25%, rgba(0, 0, 0, .76) 100%) !important;
}

.photo-grid .photo-tile::before {
  content: none !important;
  display: none !important;
}

.photo-grid .photo-tile:hover img,
.photo-grid .photo-tile:focus-visible img {
  filter: grayscale(0) saturate(1.02) contrast(1.02) brightness(1);
  transform: scale(1.028);
}

.photo-grid .photo-tile span {
  color: #e30613 !important;
  font-size: clamp(1.05rem, 1.65vw, 1.45rem) !important;
  letter-spacing: 0 !important;
}

.photo-grid .photo-tile strong {
  font-size: clamp(1.4rem, 2vw, 2.05rem) !important;
  line-height: .96 !important;
}

#monthly-photo-action {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(14, 14, 14, .22);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s ease, visibility .32s ease;
}

#monthly-photo-action.is-open {
  opacity: 1;
  visibility: visible;
}

.monthly-photo-dialog {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, .87fr) minmax(360px, 1.13fr);
  width: min(840px, 100%);
  min-height: 470px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 32px 88px rgba(0, 0, 0, .35);
  transform: translateY(22px) scale(.98);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

#monthly-photo-action.is-open .monthly-photo-dialog {
  transform: none;
}

.monthly-photo-close {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  color: #151515;
  background: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.monthly-photo-image {
  position: relative;
  min-height: 470px;
  overflow: hidden;
}

.monthly-photo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.monthly-photo-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .36), transparent 52%);
}

.monthly-photo-image span {
  position: absolute;
  z-index: 1;
  left: 1.5rem;
  bottom: 1.3rem;
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
}

.monthly-photo-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.7rem 3.6rem 2.2rem;
}

.monthly-photo-copy .eyebrow {
  margin: 0 0 1rem;
  color: #e7242a;
  font-size: .76rem;
  font-weight: 800;
}

.monthly-photo-copy h2 {
  max-width: 440px;
  margin: 0 0 1.1rem;
  color: #111;
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  line-height: .9;
}

.monthly-photo-copy > p {
  max-width: 470px;
  margin: 0 0 1.1rem;
  color: #4d4d4d;
  font-size: 1.05rem;
  line-height: 1.4;
}

.monthly-photo-saving {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 1.15rem;
  padding: .56rem .68rem;
  color: #fff;
  background: #e7242a;
  font-size: .8rem;
  font-weight: 800;
}

.monthly-photo-copy .button {
  align-self: flex-start;
  margin-bottom: 1.25rem;
  color: #fff;
  background: #151515;
  border-color: #151515;
}

.monthly-photo-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 -3.6rem -2.2rem;
  border-top: 1px solid #dedede;
}

.monthly-photo-benefits span {
  min-height: 4.7rem;
  padding: .85rem .72rem;
  border-right: 1px solid #dedede;
  color: #4c4c4c;
  font-size: .69rem;
  font-weight: 700;
  line-height: 1.18;
}

.monthly-photo-benefits span:last-child {
  border-right: 0;
}

.monthly-photo-benefits strong {
  display: block;
  margin-bottom: .22rem;
  color: #e7242a;
  font-size: 1.03rem;
  line-height: 1;
}

@media (max-width: 760px) {
  .photo-grid {
    width: calc(100% - 2rem) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .photo-grid .photo-tile,
  .photo-grid .photo-tile.large,
  .photo-grid .photo-tile.wide-right,
  .photo-grid .photo-tile.business-tile,
  .photo-grid .photo-tile.children-tile,
  .photo-grid .photo-tile.iris-tile {
    aspect-ratio: 1 / 1.16;
    padding: .7rem !important;
  }

  .photo-grid .photo-tile::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, .58) 100%) !important;
  }

  .photo-grid .photo-tile span {
    color: #e30613 !important;
    font-size: clamp(.72rem, 3.2vw, .84rem) !important;
    line-height: 1.05 !important;
  }

  .photo-grid .photo-tile strong {
    display: none !important;
  }

  .monthly-photo-dialog {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }

  .monthly-photo-image {
    min-height: 12.5rem;
    max-height: 12.5rem;
  }

  .monthly-photo-copy {
    padding: 1.9rem 1.55rem 2rem;
  }

  .monthly-photo-copy h2 {
    font-size: 2.5rem;
  }

  .monthly-photo-copy > p {
    font-size: .98rem;
  }

  .monthly-photo-benefits {
    margin: .9rem -1.55rem -2rem;
  }
}

@media (hover: none) {
  .photo-grid .photo-tile img {
    filter: grayscale(0) saturate(1) contrast(1) brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-grid .photo-tile img,
  .monthly-photo-dialog,
  #monthly-photo-action {
    transition: none;
  }
}