.page {
  color: #1a1a1a;
  background: #f7f3ed;
}

.hero,
.date,
.info,
.details,
.form {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  height: 100vh;
  margin-inline: auto;
  overflow: hidden;
}

.hero__text {
  position: relative;
  display: flex;
  justify-content: flex-start;
  margin-block-start: 10px;
}

.hero_photo_text {
  display: block;
  width: 45%;
  margin-left: 10px;
}

.hero__collage {
  position: relative;
  flex: 0 0 60%;
  width: 100%;
}

.photo-frame {
  position: relative;
  width: 260px;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  background: #eee9df;
}

.photo {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  filter: contrast(1.05) saturate(0.9) brightness(1.02);
}

.photo-frame-3 {
  position: absolute;
  top: 4%;
  left: 8%;
  transform: rotate(-6deg);
  aspect-ratio: 3/4;
}

.photo-foreground {
  position: absolute;
  bottom: -10px;
  left: 52%;
  width: 114%;
  transform: translateX(-50%);
  pointer-events: none;
}

.photo-mask {
  position: relative;
  overflow: hidden; /* ← ВОТ ГДЕ РЕЖЕМ */
}

.heart-decoration {
  position: absolute;
  top: 2%;
  right: 25%;
  width: 130px;
  /* bottom: 12%; */
  transform: rotate(-0deg);
}

.date-decoration {
  position: absolute;
  right: 10%;
  bottom: 0%;
  width: 46%;
}

.date_invite {
  align-self: center;
  width: 80%;
}

.note_collage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 480px;
  height: 60vh;
}

.heart-wrapper {
  position: relative;
  max-width: 480px;
}

.date_heart {
  z-index: 0;
  width: 105%;
  transform: rotate(113deg);
}

.date_note,
.date_note_location,
.dresscode_info,
.event-program-time_text,
.form_note {
  top: 28%;
  left: 18%;
  z-index: 1;
  color: #f7f3ed;
  font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
  inline-size: 228px;
}

.date_note,
.date_note_location {
  position: absolute;
}

.date_place {
  position: absolute;
  top: 52%;
  left: 28%;
  z-index: 1;
  width: 38%;
}

.date_note_location {
  top: 70%;
  left: 25%;
  letter-spacing: 0.08em;
  text-align: center;
}

.button {
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  width: 262px;
  height: 45px;
  border: none;
  border-radius: 40px;
  text-decoration: none;
  background-color: rgb(206 11 45);
}

.button.map {
  margin-top: 100px;
}

.button_text {
  color: #f7f3ed;
  text-transform: lowercase;
}

.event-program-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-start: 15px;
}

.event-program_image {
  display: block;
  width: 40%;
}

.event-program_image:first-child {
  width: 50%;
}

.event-program_image:last-child {
  align-self: flex-end;
  margin-inline-end: 80px;
}

.event-program-time {
  position: relative;
  left: -7%;
  display: flex;
  justify-content: flex-start;
  margin-block: 10px;
}

.event-program-time_wrapper {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-inline-start: 5px;
}

.time {
  color: #ce0b2d;
  font-weight: bold;
  font-size: 30px;
}

.event-program-time_photo {
  display: block;
  width: 225px;
  height: auto;
  transform: rotate(0deg);
}

.dresscode_info,
.event-program-time_text {
  color: #ce0b2d;
}

.event-program-time_image {
  display: block;
  width: 100px;
}

.dresscode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.dresscode_title {
  display: block;
  width: 50%;
}

.dresscode_info {
  text-align: center;
  min-inline-size: 300px;
}

.dresscode_palette {
  z-index: 3;
  display: flex;
  gap: 25px;
}

.color {
  width: 55px;
  height: 50px;
  border-radius: 50%;
}

.c1 {
  background-color: rgb(242, 232, 201);
}

.c2 {
  background-color: rgb(154, 206, 235);
}

.c3 {
  background-color: rgb(186, 219, 173);
}

.c4 {
  background-color: rgb(255, 193, 204);
}

.details {
  margin-block-start: 15px;
}

.details_title-group {
  align-self: center;
  width: 70%;
}

.details .button {
  margin-top: 50px;
}

.details_decoration {
  position: absolute;
  top: -23%;
  right: -7%;
  width: 45%;
  transform: rotate(-45deg);
}

.details_decoration.present {
  top: 32%;
  right: 0%;
  left: -19%;
  width: 65%;
  transform: rotate(45deg);
}

.details .heart-wrapper {
  top: 3%;
}

.details .form_note:first-of-type {
  inline-size: 230px;
  margin-inline-start: 80px;
}

.details .form_note.second {
  inline-size: 230px;
}

.form_title svg {
  overflow: visible;
}

.details .form_note-wrapper {
  position: absolute;
  top: 0%;
  gap: 30px;
}

.details .form_title {
  margin-inline-start: 0px;
}

.details .date_heart {
  width: 120%;
  transform: rotate(-56deg);
}

.form .heart-wrapper {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}

.form {
  margin-block-start: 10px;
}

.form_title,
.form_note,
.form.button,
.goodbye_title {
  /* position: absolute; */
  z-index: 2;
}

.form .date_heart {
  position: absolute;
  inset: 0;
  width: 120%;
  /* height: 100%; */
  /* object-fit: contain; */
  /* left: -8%; */
}

.date_heart.first {
  width: 98%;
  transform: rotate(-80deg);
}

.button.form.first {
  margin-inline-start: 135px;
}

.form_note-wrapper {
  position: relative;
  /* gap: 10px; */
  top: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 366px;
  height: 280px;
}

.form_title {
  position: static;

  width: 30%;
  margin-inline-start: 130px;

  /* top: 15%;
  right: 20%; */
}

.form_title.first {
  width: 110px;
  margin-inline-start: 0px;
  height: auto;
  display: block;
}

.form_note-wrapper.first {
  top: 25%;
  right: 10%;
  justify-content: center;
}

.form_note {
  position: static;

  /* top: 22%;
  right: 20%; */
  margin-inline-start: 50px;
  margin-block-start: 20px;
  text-align: center;
  inline-size: 360px;
  block-size: 100px;
}

.form.button {
  position: static;

  top: 37%;
  right: 25%;
  width: 210px;
  height: 40px;
  background-color: #f7f3ed;
}

.form.button .button_text {
  color: rgb(206 11 45);
  font-weight: bold;
}

.goodbye_title {
  position: static;

  width: 45%;
  margin-block-start: 35px;

  /* bottom: 40%;
  right: 10%; */
}

@media (height <= 750px) {
  .info,
  .date,
  .form {
    /* overflow: visible; */
  }
}

@media (width > 450px) {
  /* .details .form_note:first-of-type {
    margin-block-start: 25px;
    margin-inline-start: 135px;
  } */

  /* .details .form_note:first-of-type  {
    inline-size: 259px;
  } */

  .details .form_note-wrapper {
    gap: 70px;
  }
  .details_decoration {
    right: -25%;
  }
}

@media (height < 800px) {
  .date_heart {
    width: 80%;
  }

  .form .date_heart {
    /* width: 100%; */
  }

  .form_note {
    /* font-size: 13px; */
  }

  .goodbye_title {
    /* width: 50%; */
  }

  .date_place {
    width: 30%;
  }

  .button.map {
    margin-top: 50px;
  }
}

@media (width > 1024px) {
  .hero,
  .date,
  .info,
  .details,
  .form {
    overflow: visible;
  }
}