/* Only the glue needed to combine the preserved desktop FINAL with phone controls. */
.about-mobile-timeline { display: none; }

.dresscode-color {
  appearance: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.dresscode-color:focus-visible {
  outline: 2px solid #6e5844;
  outline-offset: 3px;
}

.rsvp-couple-sketch picture,
.afterparty-spotify-code picture,
.supplier-photo picture,
.about-event-photo-frame picture {
  display: block;
  width: 100%;
  height: 100%;
}

.accommodation-card-content > picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.accommodation-card-content > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: .84;
  filter: saturate(.75) brightness(1.04);
}

@media (min-width: 761px) {
  .supplier-carousel-shell { display: contents; }
  .supplier-nav { display: none; }
}

@media (max-width: 760px) {
  .supplier-carousel-shell {
    position: relative;
    min-width: 0;
    min-height: 0;
  }

  .supplier-carousel-shell > .supplier-links { height: 100%; }
  .supplier-nav { display: none; }

  .site-footer .footer-message { display: none; }
}

@media (max-width: 560px) {
  #harmonogram .timeline {
    --bubble-offset: clamp(0px, calc(27vw - 86px), 19px);
  }

  #harmonogram .timeline p {
    left: calc(0px - var(--bubble-offset));
    width: min(127px, 100%);
    justify-content: center;
    text-align: center;
  }

  #harmonogram .timeline > div:nth-child(even) p {
    left: var(--bubble-offset);
    justify-content: center;
    text-align: center;
  }

  #harmonogram .timeline time {
    position: relative;
    left: var(--bubble-offset);
  }

  #harmonogram .timeline > div:nth-child(even) time {
    left: calc(0px - var(--bubble-offset));
  }
}