section.home
{
    position: relative;
}





section.home > picture > img
{
    width: 100%;
    max-height: 100svh;
    object-fit: cover;
    object-position: center center;
}







section.home > div.text
{
    position: absolute;
    left: 3%;
    bottom: 6%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

section.home h1
{
    font-family: var(--fontThin);
    font-size: var(--middleFontSize);
    line-height: 0.7;
}

section.home h1 span
{
    font-family: var(--fontSemiBold);
    font-size: var(--middleFontSize);
}

section.home p
{
    font-family: var(--fontRegular);
    font-size: calc(var(--smallFontSize) + 0.2rem);
}


@media only screen and (max-width: 500px)
{
    section.home > div.text
    {
        position: absolute;
        left: 1rem;
        bottom: 0.5rem;
        padding: 1rem;
        width: 85%;
        gap: 0;
    }

    section.home h1,
    section.home h1 span
    {
        line-height: 1;
        font-size: var(--bigFontSize);
    }

    section.home p
    {
        font-size: var(--smallFontSize);
        padding-bottom: 1rem;
    }
}