.ceremony-wrapper {
  --ceremony-block-height: 42rem;
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: var(--ceremony-block-height);

  .ceremony-flower {
    position: absolute;
    z-index: 1;
    top: 7%;
    left: 2%;
    width: 120px;
    height: 120px;

    animation: flower-rotation 1.5s linear infinite;

    background-color: var(--new-pink-2);
    -webkit-mask: url("/assets/svgs/flower-7.svg") center / contain no-repeat;
    mask: url("/assets/svgs/flower-7.svg") center / contain no-repeat;
  }

  .ceremony-flower-2 {
    position: absolute;
    z-index: 1;
    bottom: 1%;
    left: 24%;
    width: 200px;
    height: 200px;

    animation: flower-rotation-2 8s linear infinite;

    background-color: var(--new-yellow);
    -webkit-mask: url("/assets/svgs/flower-2.svg") center / contain no-repeat;
    mask: url("/assets/svgs/flower-2.svg") center / contain no-repeat;
  }

  .image-wrap,
  .text-wrap {
    min-height: var(--ceremony-block-height);
  }

  .colorful {
    color: var(--pastel-2);
  }

  .image-wrap {
    flex: 0 0 40%;
    background-color: var(--new-green-2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    .image {
      display: block;
      width: calc(100% - 8rem);
      height: calc(100% - 12rem);
      object-fit: cover;
      padding: 0;
      margin: 0;
    }
  }

  .text-wrap {
    flex: 0 0 60%;
    background-color: var(--new-orange-3);
    margin: 0;
    width: auto;
    color: var(--new-green-1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2rem 3rem;

    p:first-of-type {
      margin: 0;
    }
    p {
      margin: 4rem 0 0;
      display: block;
      line-height: 1.2;
    }
  }
}

@media (max-width: 768px) {
  .ceremony-wrapper {
    flex-direction: column-reverse;
    min-height: auto;

    .image-wrap,
    .text-wrap {
      min-height: auto;
      width: 100%;
      flex-basis: auto;
    }

    .ceremony-flower {
      height: 70px;
      width: 70px;
      left: 5%;
      top: 10%;
    }

    .ceremony-flower-2 {
      height: 120px;
      width: 120px;
      left: auto;
      right: 5%;
      bottom: 6%;
    }

    .image-wrap {
      position: relative;
      order: 1;
      padding: 5rem 3rem;
      overflow: hidden;

      .image {
        width: 100%;
        height: 20rem;
        object-fit: cover;
      }
    }

    .text-wrap {
      order: 2;
      padding: 5rem 3rem;

      p:first-of-type {
        margin: 0;
      }
      p {
        margin: 3rem 0 0;
      }
    }
  }
}

@keyframes flower-rotation {
  from {
    transform: rotate(-17deg);
  }

  50% {
    transform: rotate(-5deg);
  }

  to {
    transform: rotate(-17deg);
  }
}

@keyframes flower-rotation-2 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}