* {
    box-sizing: border-box;
    font-size: 16px;
    margin: 0;
    padding: 0;

}

:root {
    --max-section-width: 1600px;
}

ul,
button {
    all: unset;
}

button {
    display: flex;
}

html {
    width: 100%;
    overflow-x: hidden;
    z-index: 0;
}

body {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: hidden;


    font-family: var(--font-family);
    background-color: #f1f5eb;
    color: var(--color-dark);
    z-index: 0;
}

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.container {
    display: flex;
    width: 100%;
    max-width: var(--max-section-width);

    margin: 0 auto;
    padding: clamp(1rem, 2vw, 2rem) 0;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}


.row {
    display: flex;
    position: relative;

    width: 100%;
    max-width: 1200px;

    padding: clamp(2rem, 2vw, 5rem) clamp(1rem, 5vw, 3rem);
    gap: clamp(2rem, 2vw, 4rem);

    justify-content: center;
    align-items: center;
}

.width-40 {
    width: 40%
}

.width-50 {
    width: 50%
}

.width-60 {
    width: 60%
}

.row-vertical {
    flex-direction: column;
}

.wide-section {
    max-width: none;
}

.yPadding {
    padding-top: clamp(2rem, 2vw, 5rem);
    padding-bottom: clamp(2rem, 2vw, 5rem);
}

@media (max-width:1920px) {
    :root {
        --max-section-width: calc(100% - 4rem);
    }
}

@media (max-width:1080px) {
    * {
        box-sizing: border-box;
        font-size: 12px;
    }
}

@media (max-width:920px) {
    :root {
        --max-section-width: calc(100% - 1rem);
    }

    .row {
        padding: clamp(2rem, 2vw, 3rem) 1rem;
        max-width: none;
    }
}

@media (max-width:720px) {
    :root {
        --max-section-width: none;
    }

    .row {
        padding: clamp(3rem, 2vw, 6rem) 1rem;
        max-width: none;
        flex-direction: column;
    }

    .width-40,
    .width-50,
    .width-60 {
        width: 100%;
    }
}