.main {
    background: url(/img/main-bg.webp) no-repeat center;
    background-size: cover;
    padding: 90px 10px 90px;
}

.main-grid {
    max-width: 845px;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 15px;

    h2 {
        color: $main;
        text-transform: uppercase;
        opacity: 0;
        transform: translateY(50px);
        animation: sobe 1.5s forwards;
        animation-delay: .2s;
    }

    h1 {
        @include font(48, 600, 1em);
        color: $light;
        opacity: 0;
        transform: translateY(50px);
        animation: sobe 1.5s forwards;
        animation-delay: .4s;

        span {
            color: $main;
        }
    }

    div {
        display: grid;
        gap: 5px;
        justify-items: center;
        text-align: center;
        margin-bottom: 13px;

        img {
            max-width: 102px;
        }

        h4 {
            letter-spacing: 3px;
            font-size: rem(11);
        }
    }

    &>span {
        @include detail(140px, 1px, $main);
        margin: 15px 0 40px;
        opacity: 0;
        transform: translateY(50px);
        animation: sobe 1.5s forwards;
        animation-delay: .6s;
    }

    .btn {
        opacity: 0;
        transform: translateY(50px);
        animation: sobe 1.5s forwards;
        animation-delay: .8s;
    }

    @media only screen and (max-width:500px) {

        h1 {
            @include font(38, 600, 1em);
        }
    }

    @media only screen and (max-width:398px) {

        h1 {
            @include font(35, 600, 1em);
        }
    }

}