@media (max-width: 1230px)
{
    .hero__title
    {
        font-size: 5rem;
    }
}

@media (max-width: 1050px)
{
    html {font-size: 55%;}

    .conclusion__image__box
    {
        height: 22rem;
    }

    .contact__section
    {
        min-height: 86vh;
    }
}

@media (max-width: 950px)
{
    html {font-size: 50%;}
}

@media (max-width: 850px)
{
    html {font-size: 45%;}
}

@media (max-width: 760px)
{
    html {font-size: 40%;}

    .hero__content__box
    {
        padding: var(--section-margin) 16vw;
    }

    .contact__section
    {
        min-height: 0;
    }
}

@media (max-width: 675px)
{
    html {font-size: 35%;}

    .hero__description__title
    {
        font-size: 4.2rem;
    }

    .hero__description__text
    {
        font-size: 2.6rem;
    }

    .hero__image__box
    {
        /* 4:5 aspect ration */
        height: 40rem;
        width: 32rem;
    }

    .hero__card__title
    {
        font-size: 2.6rem;
    }

    .hero__card__text
    {
        font-size: 2.2rem;
    }
}

@media (max-width: 625px)
{
    html {font-size: 32%;}

    .hero__section
    {
        min-height: 90vh;
        min-height: 90svh;
    }
}

@media (max-width: 570px)
{
    html {font-size: 29%;}

    .hero__section
    {
        min-height: 85vh;
        min-height: 85svh;
    }
}

@media (max-width: 520px)
{
    html {font-size: 25%;}

    :root {--section-margin: 6rem;}

    .conclusion__box
    {
        padding-top: 0;
    }

    .hero__section
    {
        min-height: 0;
    }

    .hero__content__box
    {
        padding: var(--section-margin) 18vw;
    }
}

@media (max-width: 452px)
{
    html {font-size: 22%;}
}

@media (max-width: 398px)
{
    html {font-size: 19%;}

    :root {--section-margin: 8.4rem;}
}

@media (max-width: 346px)
{
    html {font-size: 17%;}

    :root {--section-margin: 10rem;}
}

@media (max-width: 308px)
{
    html {font-size: 15%;}

    :root {--section-margin: 12rem;}
}

@media (max-width: 275px)
{
    html {font-size: 13%;}

    :root {--section-margin: 14rem;}
}

@media (max-width: 235px)
{
    .hero__content__box
    {
        padding: var(--section-margin) 15vw;
    }
}

@media (max-width: 220px)
{
    html {font-size: 11%;}

    :root {--section-margin: 15rem;}
}

@media (max-width: 185px)
{
    html {font-size: 10%;}

    :root {--section-margin: 15rem;}
}

@media (max-width: 168px)
{
    html {font-size: 9%;}

    :root {--section-margin: 16rem;}
}