main {
    height: max-content;
    position: relative;
    display: flex;
    width: 100%;

    margin-top: 75px;
}

.main {
    width: 100%;
    position: relative;
}

#page-header {
    position: relative;
    width: 100%;
    height: 40vh;
    
    margin-bottom: 3rem;

    & img {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: fill;
        z-index: -1;
        padding: 0;
    }

}

h3 {
    width: 90%;
    margin: 0 auto;
    font-weight: 800;
}

.custom-dx {
    width: 95%;
    margin: 0 auto;

    .jersyes-uniforms-merch {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: .8rem;

        & h5 {
            grid-column: 1/3;
            font-size: clamp(.8rem, 3vw, 1.2rem);
        }

        & label, textarea {
            grid-column: 1/3;
            font-size: clamp(.7rem, 3vw, 1rem);
        }

        #btnJerseySub {
            width: 120px;
        }
    }
}

.leave-msg {
    width: 95%;
    margin: 0 auto;
    
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 8px;

    margin-bottom: 4rem;

    .msg {
        grid-column: 1/3;
        grid-row: 1/2;

        width: 100%;
        padding: .8rem;

        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;

        & h5 {
            grid-column: 1/3;
            font-size: clamp(.7rem, 3vw, 1.2rem);
        }

        & input:nth-child(4){
            grid-column: 1/3;
        }

        & textarea {
            grid-column: 1/3;
        }

        & input:nth-child(5){
            grid-column: 1/3;
        }

        #btnMsgSub {
            width: 120px;
        }
    }

    .question {
        grid-column: 1/2;
        grid-row: 2/3;
        
        width: 100%;
        padding: .8rem;

        & h5 {
            font-size: clamp(.7rem, 3vw, 1.2rem);
        }

        .checkboxes {
            width: 100%;

            & input {
                width: 10%;
                display: inline-block;
            }

            & label {
                width: 80%;
                margin-bottom: 1rem;
                display: inline-block;
                font-size: clamp(.8rem, 3vw, 1rem);
            }
        }

        #btnKnwSub {
            width: 120px;
        }
    }

    .map {
        grid-column: 2/3;
        grid-row: 2/3;
        width: 100%;
        height: 100%;

        position: relative;
        overflow: hidden;

        & img {
            border-radius: 5px;
            width: 100%;
            height: 100%;
            
            position: absolute;
        }
    }
}

@media(min-width: 768px) {
    h3, .custom-dx, .leave-msg {
        width: 80%;
        max-width: 900px;
    }
}