.menu-btn {
    display: none;
}

@media (max-width: 87.5rem) {
    .section__hero {
        background-image: none;
    }

    .hero-text {
        grid-column: span 2;
        max-width: none;
        align-items: center;
        gap: 1.6rem;
    }

    .hero-text .wrapper {
        justify-content: center;
        align-items: center;
        gap: 6.4rem;
    }

    .hero-text .heading-tertiary {
        font-size: 2.4rem;
    }
}

@media (max-width: 75rem) {
    .section__about {
        background-color: var(--bg-secondary);
        background-image: none;
        border-radius: 10px;

        .wrapper {
            max-width: 75%;
        }
    }

    .section__pricing {
        grid-template-columns: 1fr;
        background-image: none;
        gap: 4.8rem;
    }

    .section__contact {
        grid-template-columns: 1fr;
        gap: 6.4rem;

        iframe {
            width: 100%;
        }
    }
}

@media (max-width: 62.5rem) {
    .hero-text {
        gap: 1.2rem;
    }
    
    .hero-text .heading-primary {
        font-size: 5.808rem;
        text-align: center;
    }

    .hero-text .heading-tertiary {
        font-size: 1.8rem;
    }

    .bear-img {
        width: 16rem;
    }
}

@media (max-width: 56.25em) {
    .hero-text {
        gap: 2.4rem;
    }

    .hero-text .heading-tertiary {
        font-size: 1.6rem;
    }

    .section__about, .wrapper {
        max-width: none !important;
    }

    .articles_container {
        grid-template-columns: 1fr;
    }

    .cards-container {
        grid-template-columns: repeat(2, 1fr);
        max-height: none;
        gap: 2.4rem;
    }

    .cards-container .card {
        gap: 0;
    }

    .nav-options {
        visibility: hidden;
        position: fixed;
        height: 100%;
        top: 0;
        right: 0;
        flex-direction: column;
        justify-content: center;
        background-color: #c34455;
        padding: 2.4rem 4.8rem;
    }

    .nav-options.active {
        visibility: visible;
    }

    .nav-options .dropdown-container .dropdown {
        transition: none;
    } 

    
    .nav-options.active .dropdown-container .dropdown,
    .nav-options.active .dropdown-container:hover .dropdown {
        transition: none;
        visibility: visible;
        opacity: 1;
        transform: translateY(calc(100% + 1.2rem));
    }

    .menu-btn {
        display: block;
        width: 3.6rem;
        height: 3.6rem;
        fill: var(--text-white);

        position: fixed;
        top: 4.8rem;
        right: 3.2rem;
        padding: 0.4rem;
        background-color: var(--bg-primary);
        box-shadow: 0px 0px 4px rgba(0,0,0,0.15);
        border-radius: 500px;
        z-index: 2;
    }

    footer {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 45.625rem) {


    footer {
        grid-template-columns: 1fr;
        row-gap: 4.8rem;
    }

    .pricing-table {
        grid-template-columns: 1fr;

        .tab-content {
            grid-row: span 1;
        }

        .tabs {
            display: grid;
            grid-template-columns: 1fr;
        }
    }
}

@media (max-width: 31.25rem) {
    .section__about,
    .section__contact,
    .section__pricing,
    .section__articles,
    .section__staff {
        padding-inline: 6%;
    }

    .section__about ul {
        font-size: 1.8rem;
    }

    .cards-container {
        grid-template-columns: 1fr;
    }

    .pricing-table {

        .tab-content {
            font-size: 1.6rem;
        }

        .tab-content p {
            margin-bottom: 2.4rem;
        }

        .heading-secondary {
            font-size: 3rem;
        }

        ul {
            overflow: hidden;
        }

        ul li {
            font-size: 1.6rem;
        }
    }
}