/*********************************
    IMPORT MAIN STYLE SHEET
**********************************/
@import "./main.css"; 


/*********************************
            HEADER
**********************************/
.header{
    background:linear-gradient(to top, rgba(12, 12, 12, 0.6) 10%, rgba(12, 12, 12, 0.6) 50%, rgba(12, 12, 12, 0.6) 100%), url("../../assets/images/about_hero.jpg");
    background-position:center;
}

.back_links{
    position:absolute;
    bottom:0;
    left:50%;
}

/*********************************
             MAIN
**********************************/
main{
    padding:3rem 0;
}

@media (max-width:720px){
    main{
        padding-top:1rem;
    }
}

/*DIVISION_1*/
.division_1 .title{
    text-transform:none;
    line-height:1.9em;
}

/*DIVISION_2*/
.division_2 .title_header{
    text-align:center;
}

.division_2 .cards{
    gap:2rem;
    justify-content:center;
}
/*
.card{
    border-radius:10px;
    overflow:hidden;
    position:relative;
}
*/
.card figure{
    position:relative;
    /* used to be 350px*/
    height:700px;
    overflow:hidden;
    padding:0;
}

.card figure:before{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:70%;
    background-color:#f1f1f1;
    border-radius:10px 10px 0 0;
    z-index:-1;
}

.card figure img{
    object-fit:cover;
    object-position:top;
    transition:0.5s;
}

.card p{
    font-size:13px;
}

.card:hover figure img{
    transform:scale(1.04);
}

.card figcaption{
    position:absolute;
    bottom:1rem;
    right:1rem;
    padding:0.3rem 1rem;
    z-index:1;
    border-radius:40px;
    font-size:13px;
    background-color:var(--white);
    border:2px solid var(--lite);
    display:flex;
    align-items:center;
    gap:8px;
    pointer-events:none;
}

.card .tag{
    background-color:var(--primary);
    color:var(--white);
    width:100%;
    padding:0.3rem 2rem;
}

.card article{
    background-color:var(--cream);
}

.card:nth-child(2){
    top:2rem;
}

@media (max-width:720px){
    .division_2 .cards{
        gap:1rem;
    }
    
    .card:nth-child(2){
        top:0;
    }
    
    .card figure{
        height:300px;
    }
    
    .card .tag{
        padding:0.3rem 1rem;
    }
}