/*
* @author  Agence Dn'D <contact@dnd.fr>
* @license https://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
* @link    https://www.dnd.fr/
*/

.section-full-image-with-text.custom-section {
    .flexible-layout {
        gap: 24px;

        @media (min-width: 768px) {
            margin: 0;
        }
        
        .column--half {
            margin: 0;
            padding: 0;

            @media (min-width: 768px) {
                flex: 1;
            }
        }

        &.mobile-text-first {
            @media (max-width: 767px) {
                .column--half {
                    &:first-child {
                        order: 2;
                    }

                    &:last-child {
                        order: 1;
                    }
                }
            }
        }
    }

    .feature-text-paired {
        display: flex;
        flex-direction: column;
        gap: 24px;

        .majortitle,
        .rte,
        .button-row,
        .button-row__btn {
            margin: 0;
        }

        .majortitle {
            font-weight: var(--font-weight-700);
        }

        .button-row {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;

            @media (min-width: 768px) {
                flex-direction: row;
                gap: 16px;
            }
        }

        .button-row__btn {
            @media (max-width: 767.98px) {
                margin-inline: auto;
                width: 100%;
            }
        }
    }

    .image-overlap__image {
        img {
            aspect-ratio: 4 / 3;
        }
    }

    &.section-designer {
        .flexible-layout {
            flex-direction: row-reverse;
        }

        .feature-text-paired {
            gap: 16px;
            text-align: center;

            @media (min-width: 768px) {
                margin-inline: auto;
                max-width: 606px;
            }
        }

        .subheading {
            margin-block: 0;
        }

        .rte {
            color: var(--secondary-600);
        }
    }
}