main{
    section#landing-splash{
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-image: url('../static/images/stock_wide_001.jpg');
        background-size: 85vw;
        width: 85vw;
        background-repeat: no-repeat;
        background-position: center;
        height: 30rem;
        align-items: center;
        margin-left: auto;
        margin-right: auto;

        #splash-info{
            width: min(750px, 100%);
            padding: 1.3rem clamp(1.25rem, 4vw, 5rem) 2rem;
            background-color: rgba(255, 255, 255, 0.95);
            color: #dd0000;
            vertical-align: center;
            margin-right: auto;
            font-weight: bold;

            #splash-sub{
                font-weight: normal;
                color: #000000;
            }

            h1{
                margin: 0 0 1rem;
                font-size: clamp(1.8rem, 4vw, 2.4rem);
            }

            a.link-button{
                display: block;
                width: fit-content;
                margin-top: 1.5rem;
            }
        }
    }

    section#hero-text{
        padding: 3rem 0 2.5rem;
        text-align: center;
        width: 85vw;
        margin-left: auto;
        margin-right: auto;

        h1, h2, h3{
            font-weight: normal;
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

        h1{
            font-size: clamp(1.7rem, 4vw, 2.5rem);
            font-weight: 600;
        }

        h3{
            color: #dd0000;
            font-size: clamp(1.2rem, 3vw, 1.6rem);
        }
    }

    section#services{
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
        width: 85vw;
        margin-left: auto;
        margin-right: auto;

        .service-item{
            display: flex;
            flex-direction: column;

            img{
                width: 100%;
            }

            div.title{
                background-color: #dd0000;
                color: white;
                text-align: center;
                line-height: 1.3;
                padding: 1rem;
                font-size: clamp(1rem, 2vw, 1.3rem);
            }
        }
    }
}

@media (max-width: 900px){
    main{
        section#landing-splash{
            width: 100%;
            min-height: 24rem;
            height: auto;
            padding: 2rem 1rem;
            background-size: cover;

            #splash-info{
                margin: 0 auto;
                width: min(680px, 100%);
            }
        }

        section#hero-text{
            width: 100%;
            padding: 2.2rem 1rem;
        }

        section#services{
            width: 100%;
            padding: 0 1rem;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }
    }
}

@media (max-width: 620px){
    main{
        section#landing-splash{
            min-height: 20rem;

            #splash-info{
                padding: 1.1rem 1rem 1.4rem;
            }
        }

        section#services{
            grid-template-columns: 1fr;
        }
    }
}

@media (max-width: 700px){
    main{
        padding-bottom: 1rem;
    }
}