#hero {
    height: calc(100vh - 82px);
    margin-top: 82px; /* navbar */
    padding: 128px var(--side-padding);
    display: flex;
    align-items: center;
    position: relative;

    .logo { font-size: 200px;   }
    h1    { font-size: 151px; }
    h3    { font-size: 38px; }

    h1, h3 { color: #ffffff80; }
    .logo, h1 { line-height: 1.2; }

    h3 {
        display: flex;
        gap: 30px;
        align-items: center;

        svg {
            fill: #ffffff80;
            width: 9px;
            height: 9px;
            transform: translateY(25%);
        }
    }

    img {
        position: absolute;
        height: 100%;
        width: auto;
        top: 0;
        right: 0;
        z-index: -1;
        background-repeat: no-repeat;
    }

    @media screen and (max-width: 1000px) {
        .logo { font-size: 125px; }
        h1 { font-size: 95px; }
        h3 { font-size: 25px; gap: 10px; margin-bottom: 100px;}
    }

    @media screen and (max-width: 600px) {
        .logo { font-size: 80px; }
        h1 { font-size: 61px; }
        h3 { font-size: 16px; gap: 6px; margin-bottom: 100px;}

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

        padding: 0;
        background-image: url("/public/media/hero-mobile.png");
        background-size: cover;
        background-position: center;

        img { display: none; }
    }
}