:root {
    --header-height: 360px;
    --header-logo-height: 100px;
    --header-logo-width: auto;
    --header-title-font-size: 27px;
    --header-subtitle-font-size: 16px;
    --header-padding-top: 38px;
    --header-padding-x: 25px;
    --header-socials-top: 13px;
    --header-socials-right: 23px;
    --header-socials-icon-size: 16px;
    --header-z-index: 0;
    --header-title-margin-top: 22px;
    --header-subtitle-margin-top: 14px;
    --header-ground-image: url('/landing/header-background-mobile.png?v=1.0.0');
    --header-background-size: 100% 100%;
    --header-title-max-width: 100%;
    --header-socials-gap: .5rem;
    --header-button-video-icon-size: 16px;
    --header-button-video-marging-top: 18px;
    --header-know-mire-marging-top: 12px;
    --header-video-dialog-close-size: 30px;

    --content-width: 100%;
    --content-margin: 16px auto 0 auto;

    --footer-content-width: var(--content-width);

    --launch-film-background-size: 120% 100%;
    --about-card-background-size: 100% 80%;

    --other-card-height: 550px;
}

@media screen and (min-width: 576px) {
    :root {
        --header-ground-image: url('/landing/header-background-desktop.png?v=1.0.0');
        --header-background-size: 115% 100%;
        --header-title-max-width: 420px;
        --launch-film-background-size: 100% 120%;
        --about-card-background-size: 100% 90%;
    }
}

@media screen and (min-width: 768px) {
    :root {
        --header-height: 645px;
        --header-logo-height: 220px;
        --header-logo-width: 300px;
        --header-title-font-size: 46px;
        --header-subtitle-font-size: 28px;
        --header-padding-top: 50px;
        --header-socials-top: 34px;
        --header-socials-right: 42px;
        --header-socials-icon-size: 24px;
        --header-padding-x: 0;
        --header-title-margin-top: 30px;
        --header-subtitle-margin-top: 20px;
        --header-title-max-width: 550px;
        --header-background-size: 120% 100%;
        --header-socials-gap: .75rem;
        --header-button-video-icon-size: 26px;
        --header-button-video-marging-top: 34px;
        --header-know-mire-marging-top: 16px;

        --content-width: 750px;
        --content-margin: -50px auto 0 auto;

        --launch-film-background-size: 120% 100%;
        --about-card-background-size: 120% 80%;

        --other-card-height: auto;
    }
}

@media screen and (min-width: 992px) {
    :root {
        --header-background-size: 120% 100%;
        --header-title-max-width: 750px;

        --content-margin: -100px auto 0 auto;
    }
}

@media screen and (min-width: 1200px) {
    :root{
        --header-background-size: 100% 100%;

        --content-width: 1150px;

        --article-column-number: 3;
    }
}

@media screen and (min-width: 1300px) {
    :root{
        --header-background-size: 110% 100%;

        --content-width: 1150px;

        --article-column-number: 3;
    }
}

@media screen and (min-width: 1400px) {
    :root {
        --content-width: 1200px;
        --header-background-size: 100% 120%;
    }
}

.button-video {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    border-radius: 80px;
    border: none;
    padding: 12px 16px 12px 18px;
    cursor: pointer;
    transition: .2s ease-in-out;

    &:hover {
        transform: scale(1.05);
    }

    span {
        font-family: var(--font-barlow-condensed);
        font-style: italic;
        font-weight: 700;
        font-size: 20px;
    }

    img {
        height: var(--header-button-video-icon-size);
    }
}