:root {
    /* Design colors */
    --clr-primary-10: hsl(265, 10.2%, 23.1%, 0.04);
    --clr-primary-20: hsla(265, 10.2%, 23.1%, 0.1);
    --clr-primary-30: hsl(265, 10.2%, 23.1%, 0.60);
    --clr-primary-50: hsl(265, 10.2%, 23.1%, 0.87);
    --clr-secondary-50: hsl(41.9, 65.8%, 78.2%);
    --clr-ternary-50: hsl(261.4, 97.8%, 82.5%);
    --clr-highlight-10: hsl(315, 48.6%, 27.5%, 0.04);
    --clr-highlight-50: hsl(315, 48.6%, 27.5%);
    --clr-primary-bg: hsl(230, 37.5%, 96.9%);

    /* Base colors */
    --clr-white: hsl(0, 100%, 100%);
    --clr-black: hsl(0, 0%, 0%);

    /* Fonts */
    --ff-main: "Montserrat", Arial, Helvetica, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/**
 * Elements
 */
h2,
h3,
h4 {
    color: var(--clr-highlight-50);
}

p:not(:last-child) {
    margin-bottom: 1.00em;
    font-family: var(--ff-main);
}

img {
    display: block;
    width: 100%;
    height: auto;
}

a {
    color: var(--clr-link, var(--clr-highlight-50));
    text-decoration: none;
}

a:hover {
    opacity: 0.75;
}

/**
 * Layout
 */
.site {
    display: grid;
    grid-template-columns: 0.25fr 1fr;
    background-color: var(--clr-primary-bg);
    letter-spacing: 0.01em;
    line-height: 1.5;
    font-family: var(--ff-main);
    font-size: 1.00rem;
}

.site__nav {
    position: sticky;
    top: 0;
    height: 100vh;
    padding-block: 1.00em 0.00em;
}

.site__header {
    display: flex;
    justify-content: flex-start;
    gap: 0.50em;
    padding-left: 1.50em;
}

.site__header__logo {
    width: 2.00em;
}

.site__header h1 {
    font-size: 1.25em;
    color: var(--clr-primary-50);
}

.site__main {
    position: relative;
    max-width: 90.00em;
    padding-inline: 1.50em;
    padding-block: 1.00em 0.00em;
}

.site__footer {
    position: sticky;
    bottom: 0;
    max-width: 90.00em;
    padding-inline: 1.25em;
    padding-block: 1.00em;
    margin-top: 1.00em;
    border-top-right-radius: 1.00em;
    border-top-left-radius: 1.00em;
    color: var(--clr-primary-50);
    background-color: var(--clr-white);
    box-shadow: 0px 2px 10px 0px var(--clr-primary-20);
}

/**
 * Navigation
 */
.navigation {
    --clr-link: var(--clr-primary-50);

    margin-top: 1.00em;
}

.navigation img {
    display: inline-block;
    width: auto;
    height: 1.00em;
    margin-right: 0.50em;
}

.navigation a {
    display: block;
    max-width: 65%;
    padding-left: 1.50em;
    padding-block: 0.60em;
    border-top-right-radius: 100.00em;
    border-bottom-right-radius: 100.00em;
    font-weight: bold;
}

.navigation a:hover {
    background-color: var(--clr-primary-10);
}

.navigation a.current {
    color: var(--clr-white);
    background-image: linear-gradient(98deg, var(--clr-ternary-50), var(--clr-highlight-50) 94%);
    box-shadow: 0px 4px 8px -4px var(--clr-primary-50);
}

.navigation a.current img {
    filter: invert(100%);
}

/**
 * Main content
 */
.main-content--white {
    background-color: var(--clr-white);
}

/**
 * Overlays
 */
.image-overlay {
    position: relative;
}

.image-overlay img {
    object-position: center;
    object-fit: cover;
}

.image-overlay__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--clr-white);
}

.image-overlay__text h2 {
    color: var(--clr-secondary-50);
    font-size: 3.00em;
}

.image-overlay__text p {
    font-weight: bold;
    text-align: center;
}

/**
 * Buttons
 */
button,
.button {
    display: inline-block;
    padding-block: 0.50em;
    padding-inline: 1.25em;
    text-decoration: none;
    background-color: var(--clr-highlight-50);
    color: var(--clr-white);
    font-size: 1.00rem;
    font-family: var(--ff-main);
    font-weight: bold;
    border-radius: 0.50em;
    cursor: pointer;
    box-shadow: 0px 4px 8px -4px var(--clr-primary-30);
}

.button--invert {
    border: 1px solid var(--clr-highlight-50);
    color: var(--clr-highlight-50);
    background-color: transparent;
    box-shadow: none;
}

/**
 * Info boxes
 */
.info-box {
    --img-fr: 0.50fr;
    --text-fr: 1.00fr;

    position: relative;
    display: grid;
    color: var(--clr-primary-30);
    background-color: var(--clr-highlight-10);
}

.info-box:first-of-type {
    padding-top: 2.00em;
}

.info-box--simple {
    padding-inline: 8.00em;
    padding-block: 4.00em;
    color: var(--clr-primary-50);
    background-color: transparent;
}

.info-box--gray {
    background-color: var(--clr-primary-10);
}

.info-box[data-direction="lr"] {
    --text-padding: 8.00em 1.50em;

    grid-template-columns: var(--text-fr) var(--img-fr);
    margin-bottom: 4.00em;
}

.info-box[data-direction="rl"] {
    --text-padding: 1.50em 4.00em;

    grid-template-columns: var(--img-fr) var(--text-fr);
    margin-bottom: 4.00em;
}

.info-box__img img {
    height: 100%;
    object-fit: cover;
}

.info-box__img--top-overflow {
    transform: scaleY(1.15);
    transform-origin: bottom left;
}

.info-box__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: var(--text-padding);
    margin-block: 4.00em;
}

.info-box__text h3 {
    font-size: 1.50em;
    margin-bottom: 0.50em;
}

@media (max-width: 60em) {
    .info-box[data-direction="lr"],
    .info-box[data-direction="rl"] {
        grid-template-columns: 1fr;
        grid-template-rows: min-content min-content;
    }

    .info-box__img {
        max-width: 50%;
        margin-inline: auto;
        margin-block: 2.00em 0.00em;
        order: -1;
    }

    .info-box__img--top-overflow {
        transform: none;
    }

    .info-box__text {
        text-align: center;
        padding-inline: 2.00em;
        margin-block: 2.00em
    }
}

/**
 * Call to action
 */
.call-to-action {
    padding-block: 4.00em;
    background-color: var(--clr-primary-10);
    text-align: center;
}

.call-to-action--white {
    background-color: var(--clr-white);
}

.call-to-action h2 {
    margin-bottom: 1.00em;
    color: var(--clr-primary-50);
}

/**
 * Text utilities
 */
.text--uppercase {
    text-transform: uppercase;
}

.align--center {
    text-align: center;
}

.fs--big {
    font-size: 1.50em;
}

.fs--bigger {
    font-size: 2.00em;
}

.fs--biggest {
    font-size: 2.50em;
}

.fw--bold {
    font-weight: bold;
}