section {
    padding: 100px 0;
    display: flex;
}


#main {
    min-height: 100vh;
    align-items: flex-end;
    color: #fff;
    position: relative;
    z-index: 1;
}

#main:before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 0;
    height: 100%;
    left: 0;
    width: 100%;
    background: #000;
    background: linear-gradient(transparent, #000);
    opacity: 0.75;
}

#main > img {
    display: none;
}

#main h1 {
    font-size: 3.5rem;
    font-weight: 600;
}

#main p {
    font-size: 1.25rem;
}



#features {
    background: #333;
}

.features {
    margin-bottom: 50px;
    font-size: 1.2rem;
    line-height: 150% !important;
}


.gallery img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 15px;
}



@media (max-width: 1200px) { 
    .features > * {width: 50%;}
    .features .text {padding: 0 50px;}
    .features h3 br {display: none;}
}

@media (max-width: 992px) { 
    #main {padding-bottom: 50px;}
    #main:before {opacity: 0.9;}
    #main h1 {font-size: 2.5rem;}
    #main p {font-size: 1.15rem;}

    .features .text {padding: 0;}
    .features .text h3 {margin-bottom: 15px;}
}

@media (max-width: 576px) { 
    section {padding: 75px 0;}
    #main {padding-top: 0; padding-bottom: 75px; flex-direction: column; background-image: none !important; background: #333; min-height: unset; overflow: hidden;}
    #main > img {display: block; margin-bottom: 30px;}
    #main h1 {font-size: 2.2rem;}
    #main p {font-size: 1.1rem;}
    #main .buttons {margin-top: 30px;}

    .features > * {width: 100%;}
}

@media (max-width: 576px) { 
    #main h1 {font-size: 2rem; color: var(--color-1);}
    #main p {font-size: 1rem;}
}

@media (max-width: 480px) { 
    #main > img {margin-bottom: 20px;}
    #main h1 {margin-bottom: 15px; font-size: 1.7rem;}
}

@media (max-width: 380px) { 
    section {padding: 50px 0;}
    #main {padding-bottom: 50px;}
    #main h1 {font-size: 1.4rem;}
    #main p {font-size: 0.9rem;}
    #main .buttons {margin-top: 20px;}

    .features {font-size: 1.1rem; line-height: 125% !important;}
    .icon-text-vertical .item > * .image svg {max-width: 90px; max-height: 90px;}
}

@media (max-width: 280px) { 
    #main > img {margin: 0 0 20px;}
    #main h1 {font-size: 1.2rem;}
    #main p {font-size: 0.8rem;}

    .features {font-size: 1rem;}
    .icon-text-vertical .item > * .image svg {max-width: 75px; max-height: 75px;}
}