/* Background container */
.background-container {
    width: 100%;
    background-image: url("/static/imgs/community/comunidad fondo/fondo comunidad movil.cc5306725743.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
}

/* Header */
.header-container {
    color: #fff;
    text-align: center;
    padding: 3rem 0 0 0;
    width: 100%;
}

.header-content {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

.header-main-title {
    font-size: 3rem;
    text-align: center;
}

.header-main-subtitle {
    font-size: 2.5rem;
}

/* Main content */
main {
    width: 100%;
}

/* Description Section */
.description-section {
    padding-top: 3rem;
    width: 90%;
    margin: 0 auto;
    text-align: justify;
}

.description-section-header {
    margin-bottom: 1.5rem;
}

.description-section-header h3 {
    color: #64dc1d;
}

.description-article {
    text-align: justify;
}

.description-article-content {
    margin-bottom: 1.5rem;
}

.description-article-text p {
    margin-bottom: 1rem;
    color: #c5ffca;
}

.description-article-text p:last-child {
    margin-bottom: 0;
}

.description-article-button {
    background-color: var(--color-yellow);
    border: none;
    border-radius: 1.2rem;
    font-size: 1.5rem;
    color: var(--color-darker-green);
    padding: 0.2rem 0.6rem;
    margin: 1.5rem 0 2rem 0;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
}


/* Media queries */

/* Tablet: min-width: 768px */
@media (min-width: 768px) {
    .background-container {
        background-image: url("/static/imgs/community/comunidad fondo/fondo comunidad tablet.fd933d545d54.webp");
    }

    .header-container {
        padding: 4rem 0 0 0;
    }

    .header-content {
        width: 70%;
        margin: 0 auto;
    }

    .header-main-title {
        font-size: 3.5rem;
    }

    .header-main-subtitle {
        font-size: 3rem;
    }

    .description-section {
        padding-top: 4rem;
        width: 70%;
    }

    .description-section-header h3 {
        font-size: 2.2rem;
    }

    .description-article-text p {
        font-size: 1.6rem;
    }

    .description-article-button {
        padding: 0.4rem 1.2rem;
        font-size: 1.6rem;
        margin: 2rem 0 2rem 0;
    }
}

/* Desktop: min-width: 1524px */
@media (min-width: 1524px) {
    .background-container {
        background-image: url("/static/imgs/community/comunidad fondo/fondo comunidad pc.4d65895ce524.webp");
    }

    .header-container {
        padding: 5rem 0 0 0;
    }

    .header-content {
        width: 60%;
    }

    .header-main-title {
        font-size: 4.5rem;
    }

    .header-main-subtitle {
        font-size: 3.5rem;
    }

    .description-section {
        padding-top: 5rem;
        width: 60%;
    }

    .description-section-header h3 {
        font-size: 2.6rem;
    }

    .description-article-text p {
        font-size: 1.8rem;
    }

    .description-article-button {
        padding: 0.5rem 1.5rem;
        font-size: 1.8rem;
        margin: 2.5rem 0 2.5rem 0;
    }
}