/* Sezioni Page Designer - Hero, Hero collage, Hero tre immagini */
.gf-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    align-items: center;
    gap: 56px;
}

.gf-hero__media img {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .18);
}

/* Hero collage immagini */
.gf-hero-overlap {
    display: grid;
    grid-template-columns: minmax(260px, 0.86fr) minmax(320px, 1.14fr);
    align-items: center;
    gap: 54px;
}

.gf-hero-overlap__content {
    text-align: center;
}

.gf-hero-overlap__content .gf-text {
    margin-left: auto;
    margin-right: auto;
}

.gf-hero-overlap__content .gf-actions {
    justify-content: center;
}

.gf-hero-overlap__media {
    position: relative;
    min-height: 310px;
}

.gf-hero-overlap__image {
    position: absolute;
    display: block;
    width: min(56%, 430px);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);
}

.gf-hero-overlap__image--back {
    top: 10px;
    left: 0;
    filter: grayscale(100%);
}

.gf-hero-overlap__image--front {
    right: 0;
    bottom: 0;
    width: min(62%, 470px);
}


/* =========================================================
   FIX: HERO COLLAGE IMMAGINI - RIDIMENSIONAMENTO STABILE
   ========================================================= */

.gf-hero-overlap {
    display: grid;
    grid-template-columns: minmax(260px, 0.86fr) minmax(320px, 1.14fr);
    align-items: center;
    gap: 54px;
}

.gf-hero-overlap__media {
    position: relative !important;
    min-height: 360px !important;
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
}

.gf-hero-overlap__media .gf-hero-overlap__image,
.gf-hero-overlap__media .gf-hero-overlap__image.gf-managed-image,
.gf-hero-overlap__media img.gf-hero-overlap__image {
    position: absolute !important;
    display: block !important;
    max-width: none !important;
    height: var(--gf-image-height, auto) !important;
    aspect-ratio: 16 / 9 !important;
    object-position: center center !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22) !important;
}

.gf-hero-overlap__media .gf-hero-overlap__image--back,
.gf-hero-overlap__media .gf-hero-overlap__image--back.gf-managed-image {
    top: 18px !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--gf-image-width, min(56%, 430px)) !important;
}

.gf-hero-overlap__media .gf-hero-overlap__image--front,
.gf-hero-overlap__media .gf-hero-overlap__image--front.gf-managed-image {
    right: 0 !important;
    bottom: 8px !important;
    left: auto !important;
    top: auto !important;
    width: var(--gf-image-width, min(62%, 470px)) !important;
}

.gf-hero-overlap__media .gf-hero-overlap__image.gf-image-mode--cover {
    object-fit: cover !important;
}

.gf-hero-overlap__media .gf-hero-overlap__image.gf-image-mode--contain,
.gf-hero-overlap__media .gf-hero-overlap__image.gf-image-mode--natural,
.gf-hero-overlap__media .gf-hero-overlap__image.gf-image-mode--logo {
    object-fit: contain !important;
}

.gf-hero-overlap__media .gf-hero-overlap__image.gf-image-mode--logo {
    max-height: 180px !important;
    object-fit: contain !important;
}

@media (max-width: 640px) {
    .gf-hero-overlap {
        grid-template-columns: 1fr !important;
    }

    .gf-hero-overlap__media {
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        max-width: 100% !important;
    }

    .gf-hero-overlap__media .gf-hero-overlap__image,
    .gf-hero-overlap__media .gf-hero-overlap__image.gf-managed-image,
    .gf-hero-overlap__media img.gf-hero-overlap__image {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* =========================================================
   FIX DEFINITIVO: HERO COLLAGE SEMPRE SOVRAPPOSTO SU DESKTOP
   ========================================================= */

.gf-section--hero-overlap .gf-hero-overlap {
    display: grid !important;
    grid-template-columns: minmax(260px, 0.86fr) minmax(360px, 1.14fr) !important;
    align-items: center !important;
    gap: 54px !important;
}

.gf-section--hero-overlap .gf-hero-overlap__media {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 760px !important;
    height: clamp(320px, 32vw, 430px) !important;
    min-height: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
}

.gf-section--hero-overlap .gf-hero-overlap__media .gf-hero-overlap__image,
.gf-section--hero-overlap .gf-hero-overlap__media img.gf-hero-overlap__image,
.gf-section--hero-overlap .gf-hero-overlap__media .gf-hero-overlap__image.gf-managed-image {
    position: absolute !important;
    display: block !important;
    max-width: none !important;
    height: var(--gf-image-height, auto) !important;
    aspect-ratio: 16 / 9 !important;
    object-position: center center !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22) !important;
}

.gf-section--hero-overlap .gf-hero-overlap__media .gf-hero-overlap__image--back,
.gf-section--hero-overlap .gf-hero-overlap__media img.gf-hero-overlap__image--back {
    z-index: 1 !important;
    top: 18px !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--gf-image-width, min(56%, 430px)) !important;
}

.gf-section--hero-overlap .gf-hero-overlap__media .gf-hero-overlap__image--front,
.gf-section--hero-overlap .gf-hero-overlap__media img.gf-hero-overlap__image--front {
    z-index: 2 !important;
    right: 0 !important;
    bottom: 8px !important;
    left: auto !important;
    top: auto !important;
    width: var(--gf-image-width, min(62%, 470px)) !important;
}

.gf-section--hero-overlap .gf-hero-overlap__media .gf-image-mode--cover {
    object-fit: cover !important;
}

.gf-section--hero-overlap .gf-hero-overlap__media .gf-image-mode--natural,
.gf-section--hero-overlap .gf-hero-overlap__media .gf-image-mode--contain,
.gf-section--hero-overlap .gf-hero-overlap__media .gf-image-mode--logo {
    object-fit: contain !important;
}

@media (max-width: 640px) {
    .gf-section--hero-overlap .gf-hero-overlap {
        grid-template-columns: 1fr !important;
    }

    .gf-section--hero-overlap .gf-hero-overlap__media {
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        max-width: 100% !important;
    }

    .gf-section--hero-overlap .gf-hero-overlap__media .gf-hero-overlap__image,
    .gf-section--hero-overlap .gf-hero-overlap__media img.gf-hero-overlap__image,
    .gf-section--hero-overlap .gf-hero-overlap__media .gf-hero-overlap__image.gf-managed-image {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   FIX STRUTTURALE: HERO COLLAGE CON FRAME CONTENITORE
   =========================================================
   Le immagini non sono più posizionate direttamente come <img>,
   ma dentro due frame assoluti. Così la seconda immagine resta
   sovrapposta alla prima e non può scendere sopra il footer.
*/
.gf-section--hero-overlap .gf-hero-overlap {
    display: grid !important;
    grid-template-columns: minmax(260px, 0.86fr) minmax(360px, 1.14fr) !important;
    align-items: center !important;
    gap: 54px !important;
}

.gf-section--hero-overlap .gf-hero-overlap__media {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 760px !important;
    height: clamp(340px, 34vw, 470px) !important;
    min-height: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
    isolation: isolate !important;
}

.gf-section--hero-overlap .gf-hero-overlap__frame {
    position: absolute !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #eef2f7 !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22) !important;
    line-height: 0 !important;
}

.gf-section--hero-overlap .gf-hero-overlap__frame--back {
    z-index: 1 !important;
    top: 22px !important;
    left: 0 !important;
    width: var(--gf-image-width, min(58%, 430px)) !important;
    height: var(--gf-image-height, clamp(180px, 17vw, 245px)) !important;
}

.gf-section--hero-overlap .gf-hero-overlap__frame--front {
    z-index: 2 !important;
    right: 0 !important;
    bottom: 22px !important;
    width: var(--gf-image-width, min(66%, 500px)) !important;
    height: var(--gf-image-height, clamp(200px, 20vw, 285px)) !important;
}

.gf-section--hero-overlap .gf-hero-overlap__frame img,
.gf-section--hero-overlap .gf-hero-overlap__frame .gf-image-placeholder,
.gf-section--hero-overlap .gf-hero-overlap__frame .gf-hero-overlap__image,
.gf-section--hero-overlap .gf-hero-overlap__frame .gf-managed-image {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    aspect-ratio: auto !important;
    object-position: center center !important;
}

.gf-section--hero-overlap .gf-hero-overlap__frame img.gf-image-mode--cover {
    object-fit: cover !important;
}

.gf-section--hero-overlap .gf-hero-overlap__frame img.gf-image-mode--natural,
.gf-section--hero-overlap .gf-hero-overlap__frame img.gf-image-mode--contain,
.gf-section--hero-overlap .gf-hero-overlap__frame img.gf-image-mode--logo {
    object-fit: contain !important;
}

@media (max-width: 700px) {
    .gf-section--hero-overlap .gf-hero-overlap {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .gf-section--hero-overlap .gf-hero-overlap__media {
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        max-width: 100% !important;
    }

    .gf-section--hero-overlap .gf-hero-overlap__frame,
    .gf-section--hero-overlap .gf-hero-overlap__frame--back,
    .gf-section--hero-overlap .gf-hero-overlap__frame--front {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}


/* =========================================================
   FIX: HERO COLLAGE - POSIZIONE IMMAGINI DESTRA / SINISTRA
   ========================================================= */

.gf-section--hero-overlap .gf-hero-overlap--images-right {
    grid-template-columns: minmax(260px, 0.86fr) minmax(320px, 1.14fr) !important;
}

.gf-section--hero-overlap .gf-hero-overlap--images-right .gf-hero-overlap__content {
    order: 1 !important;
}

.gf-section--hero-overlap .gf-hero-overlap--images-right .gf-hero-overlap__media {
    order: 2 !important;
}

.gf-section--hero-overlap .gf-hero-overlap--images-left {
    grid-template-columns: minmax(320px, 1.14fr) minmax(260px, 0.86fr) !important;
}

.gf-section--hero-overlap .gf-hero-overlap--images-left .gf-hero-overlap__media {
    order: 1 !important;
}

.gf-section--hero-overlap .gf-hero-overlap--images-left .gf-hero-overlap__content {
    order: 2 !important;
}

@media (max-width: 700px) {
    .gf-section--hero-overlap .gf-hero-overlap--images-left,
    .gf-section--hero-overlap .gf-hero-overlap--images-right {
        grid-template-columns: 1fr !important;
    }

    .gf-section--hero-overlap .gf-hero-overlap--images-left .gf-hero-overlap__media,
    .gf-section--hero-overlap .gf-hero-overlap--images-right .gf-hero-overlap__media {
        order: 2 !important;
    }

    .gf-section--hero-overlap .gf-hero-overlap--images-left .gf-hero-overlap__content,
    .gf-section--hero-overlap .gf-hero-overlap--images-right .gf-hero-overlap__content {
        order: 1 !important;
    }
}


/* =========================================================
   FIX DEFINITIVO: HERO COLLAGE - LAYOUT COERENTE TRA PREVIEW E SITO
   =========================================================
   Questo blocco deve restare in fondo al CSS: annulla le vecchie regole
   del collage e forza la stessa struttura sia nel Customizer sia nel frontend.
*/
.gf-section--hero-overlap > .gf-container.gf-hero-overlap,
.gf-section--hero-overlap > .gf-container.gf-hero-overlap,
.gf-section--hero-overlap .gf-container.gf-hero-overlap {
    display: grid !important;
    grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.1fr) !important;
    align-items: center !important;
    gap: clamp(36px, 5vw, 72px) !important;
}

.gf-section--hero-overlap .gf-hero-overlap--images-right,
.gf-section--hero-overlap .gf-hero-overlap--images-right {
    grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.1fr) !important;
}

.gf-section--hero-overlap .gf-hero-overlap--images-left,
.gf-section--hero-overlap .gf-hero-overlap--images-left {
    grid-template-columns: minmax(420px, 1.1fr) minmax(300px, 0.9fr) !important;
}

.gf-section--hero-overlap .gf-hero-overlap--images-right .gf-hero-overlap__content,
.gf-section--hero-overlap .gf-hero-overlap--images-right .gf-hero-overlap__content {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: initial !important;
}

.gf-section--hero-overlap .gf-hero-overlap--images-right .gf-hero-overlap__media,
.gf-section--hero-overlap .gf-hero-overlap--images-right .gf-hero-overlap__media {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: initial !important;
}

.gf-section--hero-overlap .gf-hero-overlap--images-left .gf-hero-overlap__media,
.gf-section--hero-overlap .gf-hero-overlap--images-left .gf-hero-overlap__media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: initial !important;
}

.gf-section--hero-overlap .gf-hero-overlap--images-left .gf-hero-overlap__content,
.gf-section--hero-overlap .gf-hero-overlap--images-left .gf-hero-overlap__content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: initial !important;
}

.gf-section--hero-overlap .gf-hero-overlap__content,
.gf-section--hero-overlap .gf-hero-overlap__content {
    align-self: center !important;
    min-width: 0 !important;
}

.gf-section--hero-overlap .gf-hero-overlap__media,
.gf-section--hero-overlap .gf-hero-overlap__media {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 760px !important;
    height: clamp(340px, 34vw, 470px) !important;
    min-height: 340px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    isolation: isolate !important;
}

.gf-section--hero-overlap .gf-hero-overlap__frame,
.gf-section--hero-overlap .gf-hero-overlap__frame {
    position: absolute !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #eef2f7 !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22) !important;
    line-height: 0 !important;
}

.gf-section--hero-overlap .gf-hero-overlap__frame--back,
.gf-section--hero-overlap .gf-hero-overlap__frame--back {
    z-index: 1 !important;
    top: 22px !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--gf-image-width, min(58%, 430px)) !important;
    height: var(--gf-image-height, clamp(180px, 17vw, 245px)) !important;
}

.gf-section--hero-overlap .gf-hero-overlap__frame--front,
.gf-section--hero-overlap .gf-hero-overlap__frame--front {
    z-index: 2 !important;
    right: 0 !important;
    bottom: 22px !important;
    left: auto !important;
    top: auto !important;
    width: var(--gf-image-width, min(66%, 500px)) !important;
    height: var(--gf-image-height, clamp(200px, 20vw, 285px)) !important;
}

.gf-section--hero-overlap .gf-hero-overlap__frame img,
.gf-section--hero-overlap .gf-hero-overlap__frame .gf-image-placeholder,
.gf-section--hero-overlap .gf-hero-overlap__frame img,
.gf-section--hero-overlap .gf-hero-overlap__frame .gf-image-placeholder {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    aspect-ratio: auto !important;
    object-position: center center !important;
}

.gf-section--hero-overlap .gf-hero-overlap__frame img.gf-image-mode--cover,
.gf-section--hero-overlap .gf-hero-overlap__frame img.gf-image-mode--cover {
    object-fit: cover !important;
}

.gf-section--hero-overlap .gf-hero-overlap__frame img.gf-image-mode--natural,
.gf-section--hero-overlap .gf-hero-overlap__frame img.gf-image-mode--contain,
.gf-section--hero-overlap .gf-hero-overlap__frame img.gf-image-mode--logo,
.gf-section--hero-overlap .gf-hero-overlap__frame img.gf-image-mode--natural,
.gf-section--hero-overlap .gf-hero-overlap__frame img.gf-image-mode--contain,
.gf-section--hero-overlap .gf-hero-overlap__frame img.gf-image-mode--logo {
    object-fit: contain !important;
}

@media (max-width: 640px) {
    .gf-section--hero-overlap > .gf-container.gf-hero-overlap,
    .gf-section--hero-overlap > .gf-container.gf-hero-overlap,
    .gf-section--hero-overlap .gf-container.gf-hero-overlap,
    .gf-section--hero-overlap .gf-hero-overlap--images-left,
    .gf-section--hero-overlap .gf-hero-overlap--images-right,
    .gf-section--hero-overlap .gf-hero-overlap--images-left,
    .gf-section--hero-overlap .gf-hero-overlap--images-right {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .gf-section--hero-overlap .gf-hero-overlap__content,
    .gf-section--hero-overlap .gf-hero-overlap__media,
    .gf-section--hero-overlap .gf-hero-overlap__content,
    .gf-section--hero-overlap .gf-hero-overlap__media {
        grid-column: 1 !important;
    }

    .gf-section--hero-overlap .gf-hero-overlap__content,
    .gf-section--hero-overlap .gf-hero-overlap__content {
        grid-row: 1 !important;
    }

    .gf-section--hero-overlap .gf-hero-overlap__media,
    .gf-section--hero-overlap .gf-hero-overlap__media {
        grid-row: 2 !important;
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        max-width: 100% !important;
    }

    .gf-section--hero-overlap .gf-hero-overlap__frame,
    .gf-section--hero-overlap .gf-hero-overlap__frame--back,
    .gf-section--hero-overlap .gf-hero-overlap__frame--front,
    .gf-section--hero-overlap .gf-hero-overlap__frame,
    .gf-section--hero-overlap .gf-hero-overlap__frame--back,
    .gf-section--hero-overlap .gf-hero-overlap__frame--front {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}

/* =========================================================
   BLOCCO: HOME DESIGNER - HERO TRE IMMAGINI
   ========================================================= */

.gf-section--hero-trio .gf-hero-trio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 44px;
    overflow: visible;
}



.gf-section--hero-trio .gf-hero-trio--media-top {
    flex-direction: column;
}

.gf-section--hero-trio .gf-hero-trio--media-top .gf-hero-trio__media {
    order: 1;
}

.gf-section--hero-trio .gf-hero-trio--media-top .gf-hero-trio__content {
    order: 2;
}

.gf-section--hero-trio .gf-hero-trio--media-bottom .gf-hero-trio__content {
    order: 1;
}

.gf-section--hero-trio .gf-hero-trio--media-bottom .gf-hero-trio__media {
    order: 2;
}

.gf-section--hero-trio .gf-hero-trio__content {
    max-width: 860px;
    margin: 0 auto;
}

.gf-section--hero-trio .gf-hero-trio__content h1 {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--gf-section-title-size, clamp(2.2rem, 5vw, 4.4rem));
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.gf-section--hero-trio .gf-hero-trio__content .gf-text {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.gf-section--hero-trio .gf-hero-trio__content .gf-actions {
    justify-content: center;
}

.gf-section--hero-trio .gf-hero-trio__media {
    position: relative;
    width: min(100%, 1120px);
    min-height: 310px;
    margin: 0 auto;
    overflow: visible;
}

.gf-section--hero-trio .gf-hero-trio__frame {
    position: absolute;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #eef2f7;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.gf-section--hero-trio .gf-hero-trio__frame--left {
    left: 0;
    bottom: 0;
    width: var(--gf-image-width, 34%);
    height: var(--gf-image-height, 190px);
    z-index: 1;
}

.gf-section--hero-trio .gf-hero-trio__frame--center {
    left: 50%;
    top: 0;
    width: var(--gf-image-width, 42%);
    height: var(--gf-image-height, 250px);
    transform: translateX(-50%);
    z-index: 3;
}

.gf-section--hero-trio .gf-hero-trio__frame--right {
    right: 0;
    bottom: 0;
    width: var(--gf-image-width, 34%);
    height: var(--gf-image-height, 190px);
    z-index: 2;
}

.gf-section--hero-trio .gf-hero-trio__frame img,
.gf-section--hero-trio .gf-hero-trio__frame .gf-image-placeholder,
.gf-section--hero-trio .gf-hero-trio__image,
.gf-section--hero-trio .gf-hero-trio__image.gf-managed-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
}

.gf-section--hero-trio .gf-hero-trio__frame img.gf-image-mode--cover {
    object-fit: cover !important;
}

.gf-section--hero-trio .gf-hero-trio__frame img.gf-image-mode--contain,
.gf-section--hero-trio .gf-hero-trio__frame img.gf-image-mode--natural,
.gf-section--hero-trio .gf-hero-trio__frame img.gf-image-mode--logo {
    object-fit: contain !important;
    background: #ffffff;
}

@media (max-width: 760px) {
    .gf-section--hero-trio .gf-hero-trio__media {
        min-height: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .gf-section--hero-trio .gf-hero-trio__frame,
    .gf-section--hero-trio .gf-hero-trio__frame--left,
    .gf-section--hero-trio .gf-hero-trio__frame--center,
    .gf-section--hero-trio .gf-hero-trio__frame--right {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        height: 220px;
    }
}