/* --- Desktopi stiilid --- */
.gift-welcome-character-wrapper {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  height: 440px;
  border-radius: 10%;
  text-align: justify;
  width: 600px;
  margin-bottom: -78px;
}

.gift-landing-character-image {
  position: absolute;
  z-index: 0;
  bottom: 87px;
  left: 50%;
  transform: translate(-50%, 40%);
  width: 550px;
}

.gift-landing-character-image img {
    display: block;
    width: 100%;
    border-bottom-left-radius: 5%;
}

.upper-ornament-wrapper,
.bottom-ornament-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.bottom-ornament-wrapper {
  z-index: 5;
}

.ornament.bottom {
  display: block;
  width: 100%;
  margin: 0 auto;
  transform: rotate(0.2deg);
  margin-bottom: -4rem; /* Desktopil kasutame endiselt margin-bottom */
  /* NB! Desktopil EI OLE position: absolute; bottom: 0; */
}

.ornament.upper img {
  position: relative;
  z-index: 2;
  margin: 2rem auto 1rem auto;
  transform: rotateX(180deg) rotateY(180deg);
}

.wp-block-image.ornament.upper {
  margin: 0 !important;
}

.gift-welcome-character-wrapper p {
  width: 90%;
  padding: 0 0.5rem;
  margin: 0 auto;
}

---

/* --- Mobiilile ja tahvelarvutile sobivad stiilid --- */

.wp-block-group.is-layout-flow {
    box-sizing: border-box;
}

/* Stiilid ekraanidele, mille laius on kuni 768px (tahvelarvutid) */
@media (max-width: 768px) {
    .gift-welcome-character-wrapper {
        width: 90%;
        height: auto;
        border-radius: 5%;
        margin-bottom: -50px; /* Reguleeri seda väärtust, et ornament oleks õiges kohas */
    }

    .gift-landing-character-intro {
        font-size: 0.9em;
        padding: 0 1rem;
        width: auto;
        text-align: center;
    }

    .gift-landing-character-image {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin: 20px auto 0 auto;
        width: 400px;
    }

    .gift-landing-character-image img {
        border-bottom-left-radius: 3%;
        border-bottom-right-radius: 3%;
    }

    .upper-ornament-wrapper,
    .bottom-ornament-wrapper {
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
    }

    /* VÕTI: Alumise ornamendi pildi reeglid tahvelarvutile */
    .ornament.bottom {
        display: block;
        width: 100%;
        height: auto;
        position: absolute; /* PEAB OLEMA ABSOLUUTNE */
        bottom: -85px; /* Reguleeri seda väärtust, nt -20px või -30px */
        left: 50%;
        transform: translateX(-50%) rotate(0.2deg);
        margin: 0; /* Eemalda kõik marginaalid, kui kasutad position: absolute; */
    }

    .ornament.upper img {
        display: block;
        width: 100%;
        height: auto;
        margin: 1rem auto;
        transform: rotateX(180deg) rotateY(180deg);
    }

    .gift-welcome-character-wrapper p {
        width: 85%;
        padding: 0 0.5rem;
        margin: 0 auto;
        font-size: 1.125rem;
    }
}

/* Stiilid ekraanidele, mille laius on kuni 480px (enamik mobiiltelefone) */
@media (max-width: 480px) {
    .gift-welcome-character-wrapper {
        width: 100%;
        border-radius: 6%;
        margin-bottom: -40px; /* Reguleeri seda väärtust */
    }

    .gift-landing-character-intro {
        font-size: 0.8em;
        padding: 0 0.5rem;
    }

    .gift-landing-character-image {
        margin-top: 15px;
        width: 310px;
    }

    .upper-ornament-wrapper,
    .bottom-ornament-wrapper {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    /* VÕTI: Alumise ornamendi pildi reeglid mobiilile */
    .ornament.bottom {
        display: block;
        width: 100%;
        height: auto;
        position: absolute; /* PEAB OLEMA ABSOLUUTNE */
        bottom: -72px; /* Reguleeri seda väärtust, nt -15px või -25px */
        left: 50%;
        transform: translateX(-50%) rotate(0.2deg);
        margin: 0; /* Eemalda kõik marginaalid, kui kasutad position: absolute; */
    }

    .ornament.upper img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0.5rem auto;
        transform: rotateX(180deg) rotateY(180deg);
    }

    .gift-welcome-character-wrapper p {
        width: 95%;
        padding: 0 0.5rem;
        margin: 0 auto;
        font-size: 1.125rem;
    }
}