#values {}

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

#values > .content-wrapper { text-align: center; }
#values > .content-wrapper:first-child {
    position: relative;
    margin-bottom: 50px;
}
#values > .content-wrapper > .hook {
    margin-bottom: 15px;
    
	font-size: inherit;
    font-weight: 700;
    font-style: italic;
}
#values > .content-wrapper > .hook > span { font-weight: 100; }
#values > .content-wrapper > .title {
    margin-bottom: 50px;
    font-weight: 700;
}
#values > .content-wrapper > .title > span { font-weight: 100; }
@media (min-width: 1100px)    { #values > .content-wrapper > .title { font-size: 35px; } }
@media (max-width: 1099.99px) { #values > .content-wrapper > .title { font-size: 30px; } }

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

#values > .content-wrapper > .values {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 30px;
    
    filter: drop-shadow(0 0 1.5px rgba(0,0,0,.2));
}
#values > .content-wrapper > .values > .value {
    position: relative;
    display: flex; flex: 1; overflow: hidden;
    flex-direction: column;
    justify-content: center;
    padding: 50px 30px;
    
    border-radius: 40px;
    
    text-align: left;
    line-height: 150%;
    font-size: 14px;
    
    isolation: isolate;
}
#values > .content-wrapper > .values > .value:nth-child(3n + 1) { background-color: #1E1E1E; color: #FFF; }
#values > .content-wrapper > .values > .value:nth-child(3n + 2) { background-color: #FFF; }
#values > .content-wrapper > .values > .value:nth-child(3n + 0) { background-color: #99FF99; }
#values > .content-wrapper > .values > .value:nth-child(3n + 0) > .quote:before { color: #000 !important; }
@media (min-width: 1100px) {
    #values > .content-wrapper > .values { height: 600px; }
    #values > .content-wrapper > .values > .value { width: calc((100% - 90px) / 4); }
    #values > .content-wrapper > .values > .value:nth-child(4n + 1),
    #values > .content-wrapper > .values > .value:nth-child(4n + 0) { flex: 0 0 calc((100% - 30px) * .6); }
    #values > .content-wrapper > .values > .value:nth-child(4n + 2),
    #values > .content-wrapper > .values > .value:nth-child(4n + 3) { flex: 0 0 calc((100% - 30px) * .4); }
}
@media (max-width: 1099.99px) and (min-width: 650px) {
    #values > .content-wrapper > .values { height: 1200px; }
    #values > .content-wrapper > .values > .value { width: calc((100% - 30px) / 2); }
    #values > .content-wrapper > .values > .value:nth-child(8n + 1),
    #values > .content-wrapper > .values > .value:nth-child(8n + 3),
    #values > .content-wrapper > .values > .value:nth-child(8n + 6),
    #values > .content-wrapper > .values > .value:nth-child(8n + 0) { flex: 0 0 calc((100% - 90px) * .2); }
    #values > .content-wrapper > .values > .value:nth-child(8n + 2),
    #values > .content-wrapper > .values > .value:nth-child(8n + 4),
    #values > .content-wrapper > .values > .value:nth-child(8n + 7),
    #values > .content-wrapper > .values > .value:nth-child(8n + 5) { flex: 0 0 calc((100% - 90px) * .3); }
}
@media (max-width: 649.99px) {
    #values > .content-wrapper > .values {}
    #values > .content-wrapper > .values > .value { width: 100%; min-height: 225px; }
}

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

#values > .content-wrapper > .values > .value > .background {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    
    isolation: isolate;
}
#values > .content-wrapper > .values > .value > .background > img,
#values > .content-wrapper > .values > .value > .background > video {
    display: block; height: 100%; width: 100%;
    object-fit: cover;
    object-position: center;
}
#values > .content-wrapper > .values > .value > .background ~ div { position: relative; z-index: 1; }

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

#values > .content-wrapper > .values > .value > .content {}
#values > .content-wrapper > .values > .value > .content > .title {
    margin-bottom: 20px;
    
    font-size: 18px;
    font-weight: 700;
}
#values > .content-wrapper > .values > .value > .content > .description {}

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

#values > .content-wrapper > .values > .value > .quote {
    line-height: 130%;
    font-size: 24px;
    font-weight: 300;
}
#values > .content-wrapper > .values > .value > .quote: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);
}
#values > .content-wrapper > .values > .value > .quote > span { font-weight: 700; }