* {
    margin: 0;
    padding: 0;
}

.page-container {
    background-image: url("/assets/donts/bg.png");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    overflow-x: hidden;
    width: 100vw;
}

.jumbotron {
    height: 35.0625rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back {
    padding-left: 5% !important;
    padding-top: 7rem;
}

.mistake-card {
    width: 21.5625rem;
    height: 7.5625rem;
    background: var(
        --tes1,
        linear-gradient(
            108deg,
            rgba(173, 188, 159, 0.3) 10.91%,
            rgba(79, 86, 73, 0.3) 111.54%
        )
    );
    border: 1px solid var(--tes1, #adbc9f);
    border-radius: 0.9375rem;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6.099999904632568px);
    transition: all 0.2s ease-out time;
}

.mistake-card:hover {
    background-image: url("/assets/donts/mistakeOptionsHover.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
}

.card-body p {
    color: #122218;
}

.mistake-card:hover p {
    color: white;
}

.mistake-card:hover img {
    filter: brightness(1000000000%);
}

.content-desc {
    border-radius: 0.9375rem;
    border: 1px solid var(--tes1, #adbc9f);
    background: var(
        --tes1,
        linear-gradient(
            108deg,
            rgba(173, 188, 159, 0.3) 10.91%,
            rgba(79, 86, 73, 0.3) 111.54%
        )
    );

    /* tes1 */
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6.099999904632568px);
}

.content-pic {
    border-radius: 0.9375rem;
    background: lightgray 50% / cover no-repeat;
    padding: 0;
    margin: 0;
    /* tes1 */
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6.099999904632568px);
}

.section-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Atau sesuaikan dengan kebutuhan */
}

@media (max-width: 1200px) {
    .mistake-card {
        scale: 0.7;
    }
}

@media (max-width: 992px) {
    .mistake-container {
        flex-direction: column;
        gap: 1rem;
    }

    .mistake-card {
        scale: 0.7;
    }

    .mistakes p {
        font-size: var(--planty-heading-mobile-3-font-size);
    }
}

@media (max-width: 576px) {
    .content-desc {
        width: 20.70969rem !important;
        height: 15.9375rem !important;
    }

    .content-pic {
        width: 17.5rem !important;
        height: 11.625rem !important;
    }

    .mistake-title {
        font-size: var(--planty-heading-mobile-3-font-size) !important;
    }

    .mistake-desc {
        font-size: var(--planty-heading-mobile-paragraph-font-size) !important;
    }

    .mistake-container {
        flex-direction: column;
        gap: 1rem;
    }

    .mistake-card {
        scale: 0.7;
    }

    .card-body p {
        font-size: var(--planty-heading-mobile-4-font-size);
    }

    .jumbotron-container h1 {
        font-size: var(--planty-heading-mobile-1-font-size);
    }

    .mistakes p {
        font-size: var(--planty-heading-mobile-3-font-size);
    }

    .mistake-pic {
        margin: 0 !important;
        height: 15rem !important;
    }
}