* {
    user-select: none;
}

.basics-card1 {
    background: linear-gradient(rgba(25, 25, 25, 0.85), rgba(25, 25, 25, 0.85)), url("Images/outdoor-bouldering.jpg");
    background-size: cover;
}

.basics-card2 {
    background: linear-gradient(rgba(25, 25, 25, 0.85), rgba(25, 25, 25, 0.85)), url("Images/belay-climbing.jpg");
    background-size: cover;

}

.basics-card3 {
    background: linear-gradient(rgba(25, 25, 25, 0.85), rgba(25, 25, 25, 0.85)), url("Images/volume-climbing.jpg");
    background-size: cover;

}

.basics-card4 {
    background: linear-gradient(rgba(25, 25, 25, 0.85), rgba(25, 25, 25, 0.85)), url("Images/free-solo.jpg");
    background-size: cover;

}

.basics-card5 {
    background: linear-gradient(rgba(25, 25, 25, 0.85), rgba(25, 25, 25, 0.85)), url("Images/indoor-stretched.jpg");
    background-size: cover;

}

.basics-card6 {
    background: linear-gradient(rgba(25, 25, 25, 0.85), rgba(25, 25, 25, 0.85)), url("Images/bouldering-arm.jpg");
    background-size: cover;

}

/* .basics-card {
    min-height: 50vh;
} */

.grades-background {
    background: linear-gradient(rgba(25, 25, 25, 0.85), rgba(25, 25, 25, 0.85)), url("Images/woman-climbing-overhang.jpg");
    background-size: cover;
    background-position-x: 30%;
}

@media (max-width:450px) {
    .basics-text-container {
        height: 90%;
        /* border-width: 1px;
        border-color: red; */
    }
}

@media (min-width:450px) and (max-width:600px) {
    .basics-text-container {
        height: 88%;
        /* border-width: 1px;
        border-color: yellow; */
    }
}

@media (min-width:600px) and (max-width:768px) {
    .basics-text-container {
        height: 86%;
        /* border-width: 1px;
        border-color: green; */
    }
}

@media (min-width:768px) {
    .basics-text-container {
        height: 90%;
        /* border-width: 1px;
        border-color: white; */
    }
}


/* @media (max-width: 500px) {
    .basics-card {
        height: 80vh;
        border-color: red;
        border-width: 10px;
    }
}

@media (min-width: 400px) and (max-width: 500px) {
    .basics-card {
        height: 70vh;
        border-color: yellow;
        border-width: 10px;
    }
}

@media (min-width: 500px) and (max-width: 768px) {
    .basics-card {
        height: 55vh;
        border-color: green;
        border-width: 10px;
    }
}

@media (min-width: 768px) and (max-width: 850px) {
    .basics-card {
        height: 70vh;
        border-color: white;
        border-width: 10px;
    }
}

@media (min-width: 1024px) {
    .basics-card {}
} */

p strong {
    font-weight: 700;
    color: #71a78c;
}