@import url(/css/root.css);

.as_gallery {
    background-image: url("/midia/images/backgrounds/background-brickwall_gray.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.as_gallery::after {
    content: "";
    position: absolute;
    
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: radial-gradient(
        ellipse at center,
        rgba(0,0,0,0.7) 0%,
        rgba(0,0,0,1) 100%
    );
    pointer-events: none;
}
.as_gallery::before {
    content: "";
    position: absolute;
    
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: linear-gradient(
        to right,
        var(--color-verde-arcca) 0%, var(--color-verde-arcca) 33.33%,
        var(--color-amarelo-arcca) 33.33%, var(--color-amarelo-arcca) 66.66%,
        var(--color-vermelho-arcca) 66.66%, var(--color-vermelho-arcca) 100%
    );
    opacity: 0.3;
    pointer-events: none;
}
    
.as_gallery_content {
    position: relative;
    z-index: +1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1em;
}
.as_gallery_content h1 {
    text-align: center;
    color: var(--color-base-white);
}

.as_gallery_content_areas {
    width: 100%;
    height: auto;
}
.as_gallery_content_areas video {
    width: 100%;
    border-radius: 1em;
    box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.75);
}

.as_gallery_content_area1, .as_gallery_content_area3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.as_gallery_content_area2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.gallery1_carrosel {
    width: 100%;
}

.as_gallery_content_areas_texts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.1em;
}
.as_gallery_content_areas_texts p {
    width: 100%;
    text-align: center;
    color: var(--color-base-white);
}
/* Mobile */
@media screen and (max-width: 900px) {
    .as_gallery {
        padding: 2em 1em;
        border-radius: 0.5em;
    }

    .as_gallery_content_areas {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 1.5em;
    }
    .as_gallery_content h1 {
        font-size: calc(1.5rem + 5%);
    }

    .as_gallery_content_area1, .as_gallery_content_area3 {
        padding: 0em 1em;
        width: 100%;
        height: 100%;
        gap: 1em;
        width: 100%;
        height: 100%;
    }
    .as_gallery_content_area2 {
        width: 100%;
        height: 100%;
    }

    .as_gallery_content_areas_texts p {
        font-size: calc(1rem + 5%);
    }

    .as_gallery_content_area1 { order: 2; }
    .as_gallery_content_area2 { order: 1; }
    .as_gallery_content_area3 { order: 3; }
}
/* Desktop */
@media screen and (min-width: 900px) {
    .as_gallery {
        padding: 2em 1em;
        border-radius: 1em;
    }

    .as_gallery_content_areas {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: calc(2em + 1%);
    }
    .as_gallery_content h1 {
        font-size: calc(2rem + 5%);
    }

    .as_gallery_content_area1, .as_gallery_content_area3 {
        padding: 0em 1em;
        width: 100%;
        height: 100%;
        gap: 1em;
        width: 20%;
        height: 100%;
    }
    .as_gallery_content_area2 {
        /* padding: 2em 0em 0em 0em; */
        align-items: center;
        width: 40%;
        height: 100%;
    }

    .as_gallery_content_areas_texts p {
        font-size: calc(1.2rem + 10%);
    }

    .as_gallery_content_area1 { order: 1; }
    .as_gallery_content_area2 { order: 2; }
    .as_gallery_content_area3 { order: 3; }

}