@use "../theme/breakpoints" as *;

.step {

    &:not(.active) {
        display: none;
    }

    .banner {
        position: relative;
        background-image: url('/public/assets/theme/banner-coach.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 14px;
        cursor: pointer;

        &:hover {
            &:before {
                background: transparent linear-gradient(270deg, #fffe 0%, white 100%) 0 0 no-repeat padding-box;
            }

            p {
                color: black !important;
            }
        }

        &:before {
            background: transparent linear-gradient(270deg, #31384d 0%, #131327 100%) 0 0 no-repeat padding-box;
            border-radius: 14px;
            height: 100%;
            width: 100%;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.8;
        }

        p {
            position: relative;
            opacity: 1;
            padding: 3rem;
            font-size: 2.5rem;
            font-weight: 500;
            text-align: center;

            @media (max-width: $breakpoints-lg) {
                padding: 2.2rem;
                font-size: 2.2rem;
            }

            @media (max-width: $breakpoints-md) {
                padding: 2rem;
                font-size: 2rem;
            }

            @media (max-width: $breakpoints-sm) {
                padding: 1.5rem;
                font-size: 1.6rem;
            }
        }
    }
}