main {
    position: relative;
    display: flex;

    margin-top: 75px;

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

.hero {
    overflow: hidden;
    position: relative;
    z-index: 1;

    height: 75vw;

    & img {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
}

.intro {
    height: fit-content;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow: 0 1px 3px #111;

    .intro_content {
        width: 98%;
        height: 100%;
        margin: 0 auto;
        padding: 2rem 0 2rem 0;
        /* border: 1px solid blue; */

        p {
            color: #eee;
            font-size: clamp(.8rem, 3vw, .9rem);
        }

        & img {
            display: none;
        }
    }

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        /* background-color: #11111182; */
        /* backdrop-filter: blur(2px); */

        z-index: -1;
    }

    #introBg {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 100%;
        width: 100%;
        z-index: -2;
    }
}

.sports {
    width: 98%;
    margin: 0 auto;
    margin-bottom: 2rem;
    padding: 2rem 0 2rem 0;
    
    display: flex;
    flex-direction: column;

    .sports-cont {
        width: 100%;

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

        position: relative;

        .sport {
            height: 100%;
            overflow: hidden;
            display: flex;
            box-shadow: 0 0 4px 2px #fff67c, 0 0 14px 2px #111 inset;

            & img {
                width: 85%;
                height: var(200px + 2%);
                max-height: 250px;
            }

            .sport-title {
                width: 15%;
                height: 100%;
                background-color: #111;
    
                & h4 {
                    color: white;
                    font-size: 1.5rem;
                    transform: rotate(90deg) translateX(80%);
    
                    &::before {
                        background-color: transparent;
                    }
                }
            }
        }
    }

    & a {
        text-decoration: none;
    }
}

.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;
        }
    }
}

@media(min-width: 425px){
    .intro .intro_content, .sports {
        width: 90%;
    }
}

@media(min-width: 768px){
    .hero {
        height: 35vw;
    }

    .intro {
        height: clamp(450px, 45vw, 650px);

        .intro_content {
            display: grid;
            grid-template-columns: 60% 40%;
            align-items: center;

            .imgTextHead {

                #imgCont {
                    display: inline-block;
                    height: 120px;
                }

                & P {
                    margin-top: .8rem;
                    height: fit-content;
                    padding: 0 2px 0 2px;
                    font-size: .9rem;
                }
            }

            .introModel {
                /* border: 1px solid red; */
                height: 100%;
                position: relative;

                & img {
                    display: inline-block;
                    position: absolute;
                    top: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    aspect-ratio: 1/1;
                    height: 120%;
                    object-fit: contain;
                }
            }
        }
    }
    
    .sports {
        width: 90%;
        justify-content: center;

        .sports-cont {
            width: 100%;

            grid-template-columns: repeat(4, 1fr);

            .sport {
                overflow: hidden;

                & img {
                    width: 85%;
                }

                .sport-title {
                    width: 15%;
                    height: 100%;
                    background-color: #fff67c;

                    & h4 {
                        color: #111;
                        font-family: oswald;
                        font-size: 1.8rem;
                        font-weight: 800;
                        transform: rotate(90deg) translateX(150%);

                        &::before {
                            background-color: transparent;
                        }
                    }
                }
            }
        }
    }

    .sports .sports-cont .sport img{
        max-height: 450px;
    }

    .custom-dx {
        width: 90%;
    }
}

@media(min-width: 1024px){
    .sports {
        width: 90%;
    }

    .intro {
        .intro_content {
            width: 80%;

            .imgTextHead p {
                margin-top: 1rem;
                font-size: clamp(1rem, 1vw, 1.2rem);
            }

            .imgTextHead img {
                /* border: 1px solid red; */
                height: 200px;
            }
        }
    }
}