/* styling for the best practices of aspect */

.best-practice-container {
    max-width: 1200px;
    margin: 0 8em;
    margin-bottom: 150px;
}

.best-practice-container h4{
    text-align: center;
    font-size: var(--font-size-info-title);
    color: var(--color-catch-title);
    padding-bottom: 40px;
    line-height: var(--catch-title-line-height);
    letter-spacing: -2.1px;
}

.best-practice-grid {
    display: grid;
    grid-template-areas: 
    "first second"
    "third fourth";
    gap: 20px;
    grid-auto-rows: 1fr;
}

.best-practice-card {
    width: 100%;
    gap: 20px;
    box-shadow: var(--shadow-for-box);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    min-width: -webkit-fill-available;
}

.best-practice-card-top {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    padding: 30px;
}

.best-practice-card-top h5{
    font-size: var(--font-size-title);
    margin: 0;
    font-weight: var(--font-weight-bold);
    color: #313942;
    letter-spacing: -0.021em;
    line-height: 1.2em;
}

.best-practice-card-bottom {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    padding: 30px;
}

.best-practice-card-bottom p{
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.011em;
    color: var(--color-info-text);
    line-height: var(--catch-text-line-height);
}


@media screen and (max-width: 1000px) {
    .best-practice-container {
        margin: 0 6%;
        margin-bottom: 80px;
    }
}

@media screen and (max-width: 800px) {
    .best-practice-container {
        margin: 0 20px;
        margin-bottom: 80px;
    }

    .best-practice-grid {
        grid-template-areas: 
        "first"
        "second"
        "third"
        "fourth";
    }
}