/* ======================= */
/*      SECTION BLOCK      */
/* ======================= */

.chen_section_block {
    width: 100%;
}

/* Title */

.chen_section_block__title {
    margin: 0;
    padding-top: 24px;
    padding-bottom: 32px;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.48px;

    position: relative;
}

.chen_section_block__title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 1px;
}

/* No title */

.chen_section_block--no-title {
    position: relative;
    padding-top: 48px;
}

.chen_section_block--no-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 33%;
    height: 1px;

    opacity: 0.75;
}

/* Grid */

.chen_section_block__grid {
    display: grid;
    gap: 32px;
    align-items: stretch;
}

.chen_section_block--cols-1 .chen_section_block__grid {
    grid-template-columns: 1fr;
}

.chen_section_block--cols-2 .chen_section_block__grid {
    grid-template-columns: 1fr 1fr;
}

.chen_section_block--cols-3 .chen_section_block__grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Columns */

.chen_section_block__col {
    display: flex;
    flex-direction: column;
}

.chen_section_block--cols-1 .chen_section_block__col {
    align-items: center;
}

/* Subtitle */

.chen_section_block__subtitle {
    margin: 0;
    padding-bottom: 16px;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0.48px;
}

.chen_section_block--cols-1 .chen_section_block__subtitle {
    width: 100%;
    text-align: left;
}

/* Image */

.chen_section_block__image {
    overflow: hidden;
    padding-bottom: 16px;
}

.chen_section_block__image img {
    width: 100%;
    height: auto;
    display: block;

    object-fit: cover;
}

/* Image-only column */

.chen_section_block__col--image-only {
    min-height: 100%;
}

.chen_section_block__col--image-only .chen_section_block__image {
    flex: 1;
    width: 100%;
}

.chen_section_block__col--image-only .chen_section_block__image img {
    height: 100%;
    min-height: 400px;
}

/* Text */

.chen_section_block__text {
    padding-bottom: 32px;
}

.chen_section_block--cols-1 .chen_section_block__text {
    max-width: 760px;
    text-align: left;
}

/* CTA */

.chen_section_block__cta {
    display: flex;
    justify-content: center;
}

/* COLORS */

.chen_section_block--dark .chen_section_block__title {
    color: #333333;
}

.chen_section_block--dark .chen_section_block__title::before,
.chen_section_block--dark.chen_section_block--no-title::before {
    background: rgba(51,51,51,0.75);
}

.chen_section_block--dark .chen_section_block__subtitle {
    color: #8a8a8a;
}

.chen_section_block--olive .chen_section_block__title {
    color: #808000;
}

.chen_section_block--olive .chen_section_block__title::before,
.chen_section_block--olive.chen_section_block--no-title::before {
    background: rgba(128,128,0,0.75);
}

.chen_section_block--olive .chen_section_block__subtitle {
    color: #d6c41e;
}

.chen_section_block--rose .chen_section_block__title {
    color: #f25f70;
}

.chen_section_block--rose .chen_section_block__title::before,
.chen_section_block--rose.chen_section_block--no-title::before {
    background: rgba(242,95,112,0.75);
}

.chen_section_block--rose .chen_section_block__subtitle {
    color: #20c9b5;
}

.chen_section_block--teal .chen_section_block__title {
    color: #008080;
}

.chen_section_block--teal .chen_section_block__title::before,
.chen_section_block--teal.chen_section_block--no-title::before {
    background: rgba(0,128,128,0.75);
}

.chen_section_block--teal .chen_section_block__subtitle {
    color: #f29e38;
}

/* Responsive */

@media (max-width: 768px) {

    .chen_section_block__grid {
        grid-template-columns: 1fr !important;
    }

    .chen_section_block__col--image-only .chen_section_block__image img {
        min-height: 260px;
    }
}