#folder { filter: drop-shadow(0 0 1.5px rgba(0,0,0,.2)); }

/*----------------------------------------------------------------------------------------------------*/

#folder > .content-wrapper { display: flex; }
#folder > .content-wrapper > div {
    overflow: hidden;
    border-radius: 40px;
    isolation: isolate;
}
@media (min-width: 1100px) {
    #folder > .content-wrapper {
        flex-direction: row;
        column-gap: 50px;
    }
    #folder > .content-wrapper > .main { flex: 1; }
    #folder > .content-wrapper > .card { flex: 0 0 350px; }
}
@media (max-width: 1099.99px) {
    #folder > .content-wrapper {
        flex-direction: column;
        row-gap: 50px;
    }
    #folder > .content-wrapper > .card { min-height: 450px; }
}

/*----------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------*/

#folder > .content-wrapper > .main {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 30px;
    
    background-color: #FFF;
}
#folder > .content-wrapper > .main > .content { position: relative; }
#folder > .content-wrapper > .main > .content > .illustration {}
#folder > .content-wrapper > .main > .content > .illustration > img {
    display: block; height: 100%; width: 100%;
    
    object-fit: contain;
    object-position: center;
    
    background-color: #FFF;
}
#folder > .content-wrapper > .main > .content > .title {
    max-width: 450px;
    margin: 0 0 30px;
    
    font-weight: 700;
}
#folder > .content-wrapper > .main > .content > .title > span { font-weight: 300; }
#folder > .content-wrapper > .main > .content > .description {
    max-width: 350px;
    
    line-height: 24px;
    font-size: 16px;
}

#folder > .content-wrapper > .main > .footer {}
#folder > .content-wrapper > .main > .footer > .hook {
    text-transform: uppercase;
    font-weight: 700;
}
#folder > .content-wrapper > .main > .footer > .hook:before { content: '#'; }
#folder > .content-wrapper > .main > .footer > .cta-link { float: right; }

@media (min-width: 750px) {
    #folder > .content-wrapper > .main { padding: 30px 35px; }
    #folder > .content-wrapper > .main > .content > .illustration {
        position: absolute; top: 0; right: 0; bottom: 0; z-index: -1;
        width: calc(100% - 350px - 30px);
    }
    #folder > .content-wrapper > .main > .content > .illustration > img { object-position: right center; }
    #folder > .content-wrapper > .main > .content > .title {
        line-height: 60px;
        font-size: 50px;
    }
    #folder > .content-wrapper > .main > .footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    #folder > .content-wrapper > .main > .footer > .hook { font-size: 50px; }
}
@media (max-width: 749.99px) {
    #folder > .content-wrapper > .main { padding: 30px; }
    #folder > .content-wrapper > .main > .content > .illustration { margin-bottom: 30px; }
    #folder > .content-wrapper > .main > .content > .illustration > img { object-position: center; }
    #folder > .content-wrapper > .main > .content > .title {
        line-height: 40px;
        font-size: 30px;
    }
    #folder > .content-wrapper > .main > .footer > .hook { font-size: 30px; }
    #folder > .content-wrapper > .main > .footer > .cta-link { margin-top: 60px; }
}

/*----------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------*/

#folder > .content-wrapper > .card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
}

/*----------------------------------------------------------------------------------------------------*/

#folder > .content-wrapper > .card > .background {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
}
#folder > .content-wrapper > .card > .background > img,
#folder > .content-wrapper > .card > .background > video {
    display: block; height: 100%; width: 100%;
    object-fit: cover;
    object-position: center;
}
#folder > .content-wrapper > .card > .background:after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    
    background-color: #000;
    
    opacity: .3;
}

/*----------------------------------------------------------------------------------------*/

#folder > .content-wrapper > .card > .hook {
    max-width: 350px;
    
    line-height: 130%;
    font-size: 20px;
    font-weight: 700;
    color: #FFF;
}
#folder > .content-wrapper > .card > .hook:before {
    content: '“';
    display: inline-block; height: 25px; overflow: hidden;
    margin-right: 10px;
    
    line-height: 50px;
    font-size: 45px;
    font-weight: 700;
    color: var(--main-color);
}
#folder > .content-wrapper > .card > .hook > span { font-weight: 300; }