/* =========================================================
   SDCA DATA PRIVACY OFFICE
   HOME PAGE

   IMPORTANT:
   Shared header, subheader, hero, footer, and mobile DPO
   navigation styles are handled by DPO_Common.css.

   This file contains HOME PAGE styles only.
========================================================= */


/* =========================================================
   GENERAL CONTAINER
========================================================= */

.dpo-container {
    width: 100%;
    max-width: 1440px;

    margin: 0 auto;

    padding: 0 60px;
}

.dpo-container-wide {
    max-width: 1500px;
}


/* =========================================================
   GENERAL TEXT
========================================================= */

.dpo-title {
    margin: 0 0 16px;

    color: var(--dpo-red);

    font-size: 42px;
    font-weight: 800;

    line-height: 1.08;
}

.dpo-paragraph {
    margin: 0;

    color: #222222;

    font-size: 17px;

    line-height: 1.65;

    text-align: left;
}


/* =========================================================
   INTRO SECTION
========================================================= */

.dpo-intro-section {
    position: relative;

    margin-top: 0 !important;

    padding: 34px 0 36px;

    background: #ffffff !important;
    background-image: none !important;

    overflow: hidden;
}

.dpo-intro-section::before,
.dpo-intro-section::after {
    display: none !important;

    content: none !important;
}

.dpo-intro-box,
.dpo-intro-divider,
.dpo-news-title-box {
    position: relative;

    z-index: 1;
}


/* =========================================================
   INTRO CONTENT
========================================================= */

.dpo-intro-box {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        310px minmax(0, 1fr);

    align-items: center;

    gap: 58px;
}

.dpo-intro-image-wrap {
    width: 310px;
    max-width: 310px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.dpo-intro-logo {
    width: 100%;
    max-width: 260px;

    height: auto;

    display: block;

    object-fit: contain;
}

.dpo-intro-text {
    width: 100%;
    max-width: 760px;

    text-align: left;
}

.dpo-intro-text .dpo-title {
    margin-bottom: 16px;

    color: var(--dpo-red);

    font-size: 42px;

    line-height: 1.08;
}

.dpo-intro-text .dpo-paragraph {
    color: #222222;

    font-size: 17px;

    line-height: 1.65;
}


/* =========================================================
   INTRO DIVIDER
========================================================= */

.dpo-intro-divider {
    width: 100%;
    max-width: 1180px;

    height: 2px;

    margin: 32px auto 22px;

    background: #b8b8b8;
}


/* =========================================================
   NEWS TITLE AREA
========================================================= */

.dpo-news-title-box {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        310px minmax(0, 1fr);

    align-items: center;

    gap: 58px;
}

.dpo-news-logo {
    width: 310px;
    max-width: 310px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.dpo-news-logo img {
    width: 100%;
    max-width: 160px;

    height: auto;

    display: block;

    object-fit: contain;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.dpo-section-title {
    width: 100%;

    margin: 0;

    padding: 18px 30px;

    background:
        linear-gradient(to right,
            var(--dpo-bright-red),
            var(--dpo-red));

    color: var(--dpo-white);

    box-shadow:
        0 3px 7px rgba(0, 0, 0, 0.18);

    font-size: 34px;
    font-weight: 800;

    line-height: 1.1;

    text-align: center;
    text-transform: uppercase;
}

.dpo-wide-section-title {
    width: 100%;
    max-width: 1240px;

    margin: 35px auto 0;

    box-sizing: border-box;
}


/* =========================================================
   NEWS BAND
========================================================= */

.dpo-news-band {
    margin-top: 0;

    padding: 38px 60px 50px;

    background: var(--dpo-red);
}


/* =========================================================
   NEWS GRID
========================================================= */

.dpo-news-grid {
    width: 100%;
    max-width: 1240px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 34px;
}


/* =========================================================
   NEWS CARD
========================================================= */

.dpo-card {
    min-height: 500px;

    padding: 14px;

    display: flex;

    flex-direction: column;

    background: var(--dpo-white);

    border-radius: 13px;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.15);

    overflow: hidden;

    box-sizing: border-box;
}

.dpo-card-image-link {
    width: 100%;

    display: block;

    border-radius: 8px;

    overflow: hidden;

    text-decoration: none;
}

.dpo-card img {
    width: 100%;
    height: 260px;

    display: block;

    object-fit: cover;
    object-position: center center;

    border-radius: 8px;

    transition:
        transform 0.25s ease;
}

.dpo-card-image-link:hover img {
    transform: scale(1.03);
}

.dpo-card-content {
    flex: 1;

    display: flex;

    flex-direction: column;
}

.dpo-card-title {
    min-height: 44px;

    margin: 14px 0 8px;

    color: var(--dpo-red);

    font-size: 16px;
    font-weight: 700;

    line-height: 1.35;
}

.dpo-card-text {
    margin-bottom: 14px;

    color: #222222;

    font-size: 13px;

    line-height: 1.5;
}

.dpo-card-action {
    margin-top: auto;

    padding-top: 12px;

    text-align: center;
}

.dpo-btn {
    min-width: 96px;
    min-height: 34px;

    padding: 7px 18px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    background: #333333;

    color: var(--dpo-white) !important;

    border-radius: 20px;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none !important;

    box-sizing: border-box;
}

.dpo-btn:hover,
.dpo-btn:focus {
    background: var(--dpo-red);

    color: var(--dpo-white) !important;

    text-decoration: none !important;
}


/* =========================================================
   VIDEO
========================================================= */

.dpo-video {
    width: 100%;
    max-width: 1180px;

    margin: 45px auto 20px;

    position: relative;
}

.dpo-video img,
.dpo-video iframe,
.dpo-video video {
    width: 100%;
    height: 520px;

    display: block;

    object-fit: cover;
    object-position: center center;
}


/* =========================================================
   EMBEDDED VIDEO
========================================================= */

.dpo-embed-video-wrap {
    width: 100%;
    max-width: 1180px;

    aspect-ratio: 16 / 9;

    margin: 40px auto;

    background: #000000;

    border-radius: 10px;

    overflow: hidden;
}

.dpo-embed-video-wrap iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;
}


/* =========================================================
   NEWSLETTER GRID
========================================================= */

.dpo-newsletter-grid {
    width: 100%;
    max-width: 1240px;

    margin: 34px auto 45px;

    padding: 0 0 35px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 34px;

    align-items: start;
}

.dpo-newsletter-item {
    width: 100%;

    text-align: center;
}


/* =========================================================
   NEWSLETTER IMAGE
========================================================= */

.dpo-newsletter-image-wrap {
    width: 100%;
    height: 560px;

    display: flex;

    align-items: flex-start;
    justify-content: center;

    background: #ffffff;

    overflow: hidden;
}

.dpo-newsletter-image-wrap img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: top center;
}


/* =========================================================
   NEWSLETTER TITLE
========================================================= */

.dpo-newsletter-title {
    min-height: 48px;

    margin: 18px 0 14px;

    color: var(--dpo-red);

    font-family:
        Georgia,
        'Times New Roman',
        serif;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.25;

    text-align: center;
}


/* =========================================================
   NEWSLETTER BUTTON
========================================================= */

.dpo-newsletter-btn {
    width: 100%;
    min-height: 43px;

    padding: 10px 14px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #536f78;

    color: #ffffff !important;

    border-radius: 3px;

    font-family:
        Georgia,
        'Times New Roman',
        serif;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none !important;

    transition:
        background 0.2s ease;
}

.dpo-newsletter-btn:hover,
.dpo-newsletter-btn:focus {
    background: #405760;

    color: #ffffff !important;

    text-decoration: none !important;
}


/* =========================================================
   PREVIOUS ACTIVITIES
========================================================= */

.dpo-pa-article {
    width: 100%;
    max-width: 1240px;

    margin: 0 auto;

    padding: 42px 0 46px;

    border-bottom:
        1px solid #cfcfcf;

    box-sizing: border-box;
}

.dpo-pa-article::after {
    content: "";

    display: table;

    clear: both;
}

.dpo-pa-article:last-of-type {
    border-bottom: none;
}

.dpo-pa-feature-section,
.dpo-pa-simple-section,
.dpo-pa-text-top-section,
.dpo-pa-text-only-section,
.dpo-pa-images-only-section,
.dpo-pa-images-carousel-section,
.dpo-pa-text-carousel-section,
.dpo-pa-video-only-section,
.dpo-pa-text-video-section {
    width: 100%;
    max-width: 1240px;
}

.dpo-pa-text-only-section {
    max-width: 1050px;
}


/* =========================================================
   FEATURE ACTIVITY
   MAIN IMAGE + WRAPPING TEXT
========================================================= */

.dpo-pa-feature-top {
    width: 100%;

    display: block;
}

.dpo-pa-feature-top::after {
    content: "";

    display: table;

    clear: both;
}


/* =========================================================
   FEATURE MAIN IMAGE
========================================================= */

.dpo-pa-feature-main-image {
    float: left;

    width: 32%;
    max-width: 32%;

    margin:
        0 34px 22px 0;

    padding: 0;

    display: block;
}


/*
 * Main feature image is NOT cropped.
 */
.dpo-pa-feature-main-image img {
    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block;

    object-fit: contain !important;
    object-position: top left !important;

    background: transparent !important;
}

.dpo-pa-feature-main-image video {
    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;

    margin: 0 !important;

    display: block;

    object-fit: contain !important;

    background: #000000;
}


/* =========================================================
   FEATURE IMAGE RIGHT
========================================================= */

.dpo-pa-feature-top.reverse .dpo-pa-feature-main-image {
    float: right;

    margin:
        0 0 22px 34px;
}


/* =========================================================
   FEATURE TEXT
========================================================= */

.dpo-pa-feature-text {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0;
    padding: 0;

    display: block;
}

.dpo-pa-feature-title {
    margin: 0 0 18px;

    color: var(--dpo-red);

    font-family:
        'Century Gothic',
        'Poppins',
        Arial,
        sans-serif;

    font-size: 31px;
    font-weight: 800;

    line-height: 1.25;

    text-align: left;
}

.dpo-pa-feature-body {
    width: auto;

    color: #222222;

    font-family:
        'Century Gothic',
        'Poppins',
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.72;

    text-align: left;
}

.dpo-pa-feature-body p {
    margin: 0 0 15px;
}


/* =========================================================
   SIMPLE IMAGE + TEXT
========================================================= */

.dpo-pa-simple-layout {
    width: 100%;

    display: block;
}

.dpo-pa-simple-layout::after {
    content: "";

    display: table;

    clear: both;
}

.dpo-pa-simple-images {
    float: left;

    width: 32%;
    max-width: 32%;

    margin:
        0 34px 22px 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 18px;
}

.dpo-pa-simple-layout.reverse .dpo-pa-simple-images {
    float: right;

    margin:
        0 0 22px 34px;
}

.dpo-pa-simple-images img {
    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: none !important;

    display: block;

    object-fit: contain !important;
    object-position: top left !important;

    background: transparent !important;
}

.dpo-pa-simple-images video {
    width: 100% !important;
    height: auto !important;

    display: block;

    object-fit: contain !important;

    background: #000000;
}

.dpo-pa-simple-text {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    display: block;
}


/* =========================================================
   TEXT-TOP ACTIVITY
========================================================= */

.dpo-pa-text-top-section .dpo-pa-feature-title {
    margin-bottom: 18px;
}

.dpo-pa-text-top-section .dpo-pa-feature-body,

.dpo-pa-text-carousel-section .dpo-pa-feature-body,

.dpo-pa-text-video-section .dpo-pa-feature-body {
    margin-bottom: 28px;
}

.dpo-pa-text-only-section .dpo-pa-feature-body {
    font-size: 17px;

    line-height: 1.8;
}


/* =========================================================
   TWO IMAGE GRID
========================================================= */

body.dpo-body .dpo-pa-text-image-grid {
    width: 100% !important;

    clear: both !important;

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 26px !important;

    align-items: stretch !important;
}

body.dpo-body .dpo-pa-text-image-item {
    width: 100% !important;

    aspect-ratio: 4 / 3;

    display: block !important;

    background: #eeeeee;

    overflow: hidden !important;
}

body.dpo-body .dpo-pa-text-image-item img,

body.dpo-body .dpo-pa-text-image-item video {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center center !important;
}


/* =========================================================
   THREE IMAGE GRID
   CROPPED + EQUAL SIZE
========================================================= */

/*
 * IMPORTANT:
 *
 * These images are intentionally CROPPED.
 *
 * This prevents portrait/large images from making
 * the gallery appear vertically.
 */

body.dpo-body .dpo-pa-three-image-grid {
    width: 100% !important;

    clear: both !important;

    margin:
        28px 0 0 !important;

    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    grid-template-rows: auto !important;

    grid-auto-flow: row !important;

    gap: 26px !important;

    align-items: stretch !important;

    box-sizing: border-box !important;
}


body.dpo-body .dpo-pa-three-image-grid .dpo-pa-three-image-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    /*
     * Landscape-style box.
     *
     * Change to 1 / 1 if you prefer square.
     */
    aspect-ratio: 4 / 3 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: #eeeeee !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


body.dpo-body .dpo-pa-three-image-grid .dpo-pa-three-image-item img,

body.dpo-body .dpo-pa-three-image-grid .dpo-pa-three-image-item video {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center center !important;
}


/* =========================================================
   FEATURE GALLERY
   THREE HORIZONTAL CROPPED IMAGES
========================================================= */

/*
 * This is used by:
 *
 * activity_feature_gallery
 *
 * First uploaded image = feature image beside text.
 *
 * Remaining 3 images = this horizontal grid.
 */

body.dpo-body .dpo-pa-feature-grid {
    width: 100% !important;

    clear: both !important;

    margin:
        34px 0 0 !important;

    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    grid-template-rows: auto !important;

    grid-auto-flow: row !important;

    gap: 26px !important;

    align-items: stretch !important;

    box-sizing: border-box !important;
}


body.dpo-body .dpo-pa-feature-grid .dpo-pa-feature-grid-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    /*
     * Gives all 3 images the same dimensions.
     */
    aspect-ratio: 4 / 3 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: #eeeeee !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


body.dpo-body .dpo-pa-feature-grid .dpo-pa-feature-grid-item img,

body.dpo-body .dpo-pa-feature-grid .dpo-pa-feature-grid-item video {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    /*
     * Intentionally crop the 3 gallery images.
     */
    object-fit: cover !important;
    object-position: center center !important;
}


/* =========================================================
   PREVIOUS ACTIVITY CAROUSEL
========================================================= */

.dpo-pa-carousel {
    width: 100%;

    clear: both;

    margin-top: 38px;
    margin-bottom: 48px;
}

.dpo-pa-carousel .carousel-inner img {
    width: 100%;
    height: auto !important;

    max-height: none !important;

    display: block;

    object-fit: contain !important;
    object-position: top center !important;

    background: #ffffff;
}

.dpo-pa-carousel .carousel-inner video {
    width: 100%;
    height: auto !important;

    display: block;

    object-fit: contain !important;
    object-position: center center !important;

    background: #000000;
}

.dpo-pa-carousel .carousel-indicators {
    bottom: -38px;
}

.dpo-pa-carousel .carousel-indicators [data-bs-target] {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background-color: #777777;
}


/* =========================================================
   ACTIVITY VIDEO
========================================================= */

.dpo-pa-video-wrap {
    width: 100%;

    clear: both;

    margin-top: 28px;

    background: #000000;
}

.dpo-pa-video-wrap video {
    width: 100%;

    max-height: 620px;

    display: block;

    background: #000000;
}


/* =========================================================
   OLD CONTENT SUPPORT
========================================================= */

.dpo-two-column {
    display: grid;

    grid-template-columns:
        1fr 1.2fr;

    gap: 30px;

    align-items: start;
}

.dpo-two-column.reverse {
    grid-template-columns:
        1.2fr 1fr;
}

.dpo-two-column img,
.dpo-wide-image img,
.dpo-image-row img,
.dpo-image-stack img {
    width: 100%;

    height: auto !important;
    max-height: none !important;

    display: block;

    object-fit: contain !important;
    object-position: top center !important;

    border-radius: 10px;

    background: transparent;
}

.dpo-image-stack {
    display: flex;

    flex-direction: column;

    gap: 18px;
}

.dpo-image-row {
    margin-top: 22px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 35px;

    align-items: start;
}

.dpo-wide-image {
    width: 100%;
    max-width: 1180px;

    margin: 25px auto;
}

.dpo-dots {
    display: none;
}


/* =========================================================
   RESPONSIVE <= 1300PX
========================================================= */

@media screen and (max-width: 1300px) {

    .dpo-container {
        max-width: 100%;

        padding-left: 40px;
        padding-right: 40px;
    }

    .dpo-intro-box,
    .dpo-intro-divider,
    .dpo-news-title-box,
    .dpo-video,
    .dpo-wide-section-title,
    .dpo-news-grid,
    .dpo-newsletter-grid,
    .dpo-pa-article {
        max-width: 1120px;
    }

    .dpo-pa-feature-main-image,
    .dpo-pa-simple-images {
        width: 32%;
        max-width: 32%;
    }

    body.dpo-body .dpo-pa-feature-grid,

    body.dpo-body .dpo-pa-three-image-grid {
        gap: 22px !important;
    }
}


/* =========================================================
   RESPONSIVE <= 1100PX
========================================================= */

@media screen and (max-width: 1100px) {

    .dpo-container {
        max-width: 100%;

        padding-left: 24px;
        padding-right: 24px;
    }


    /* =====================================================
       INTRO
    ===================================================== */

    .dpo-intro-box,
    .dpo-news-title-box {
        grid-template-columns:
            220px minmax(0, 1fr);

        gap: 30px;
    }

    .dpo-intro-image-wrap,
    .dpo-news-logo {
        width: 220px;
        max-width: 220px;
    }

    .dpo-intro-logo {
        max-width: 190px;
    }

    .dpo-intro-text .dpo-title {
        font-size: 34px;
    }


    /* =====================================================
       NEWS
    ===================================================== */

    .dpo-news-grid {
        max-width: 100%;

        gap: 22px;
    }

    .dpo-card img {
        height: 220px;
    }


    /* =====================================================
       NEWSLETTER
    ===================================================== */

    .dpo-newsletter-grid {
        gap: 22px;
    }

    .dpo-newsletter-image-wrap {
        height: 480px;
    }


    /* =====================================================
       PREVIOUS ACTIVITY
    ===================================================== */

    .dpo-pa-feature-main-image,
    .dpo-pa-simple-images {
        width: 34%;
        max-width: 34%;

        margin-right: 28px;
        margin-bottom: 20px;
    }

    .dpo-pa-feature-top.reverse .dpo-pa-feature-main-image,

    .dpo-pa-simple-layout.reverse .dpo-pa-simple-images {
        margin-right: 0;
        margin-left: 28px;
    }

    .dpo-pa-feature-title {
        font-size: 27px;
    }

    .dpo-pa-feature-body {
        font-size: 15px;

        line-height: 1.65;
    }


    /*
     * Keep three horizontal columns.
     */
    body.dpo-body .dpo-pa-feature-grid,

    body.dpo-body .dpo-pa-three-image-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 18px !important;
    }
}


/* =========================================================
   RESPONSIVE <= 991PX
========================================================= */

@media screen and (max-width: 991px) {

    /* =====================================================
       NEWS
    ===================================================== */

    .dpo-news-grid,
    .dpo-newsletter-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* =====================================================
       FEATURE ACTIVITY
    ===================================================== */

    .dpo-pa-feature-main-image,
    .dpo-pa-simple-images {
        width: 36%;
        max-width: 36%;

        margin-right: 24px;
        margin-bottom: 18px;
    }

    .dpo-pa-feature-top.reverse .dpo-pa-feature-main-image,

    .dpo-pa-simple-layout.reverse .dpo-pa-simple-images {
        margin-right: 0;
        margin-left: 24px;
    }

    .dpo-pa-feature-title {
        font-size: 25px;
    }

    .dpo-pa-feature-body {
        font-size: 14px;

        line-height: 1.6;
    }


    /* =====================================================
       THREE IMAGE GRIDS

       IMPORTANT:
       Keep these HORIZONTAL.
    ===================================================== */

    body.dpo-body .dpo-pa-feature-grid,

    body.dpo-body .dpo-pa-three-image-grid {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 14px !important;
    }


    body.dpo-body .dpo-pa-text-image-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 14px !important;
    }
}


/* =========================================================
   RESPONSIVE <= 768PX
========================================================= */

@media screen and (max-width: 768px) {

    /* =====================================================
       CONTAINER
    ===================================================== */

    .dpo-container {
        padding-left: 18px;
        padding-right: 18px;
    }


    /* =====================================================
       INTRO
    ===================================================== */

    .dpo-intro-section {
        padding: 25px 0 18px;
    }

    .dpo-intro-box,
    .dpo-news-title-box {
        grid-template-columns: 1fr;

        gap: 18px;

        text-align: center;
    }

    .dpo-intro-image-wrap,
    .dpo-news-logo {
        width: 100%;
        max-width: 100%;
    }

    .dpo-intro-logo {
        max-width: 170px;
    }

    .dpo-intro-text {
        max-width: 100%;

        text-align: center;
    }

    .dpo-intro-text .dpo-title {
        font-size: 28px;

        text-align: center;
    }

    .dpo-intro-text .dpo-paragraph {
        font-size: 14px;

        text-align: center;
    }


    /* =====================================================
       GENERAL TEXT
    ===================================================== */

    .dpo-title {
        font-size: 26px;

        text-align: center;
    }

    .dpo-paragraph {
        font-size: 14px;

        text-align: center;
    }

    .dpo-intro-divider {
        max-width: 90%;

        margin:
            18px auto 14px;
    }

    .dpo-section-title {
        padding: 14px 16px;

        font-size: 22px;
    }


    /* =====================================================
       NEWS
    ===================================================== */

    .dpo-news-band {
        padding: 28px 18px 36px;
    }

    .dpo-news-grid,
    .dpo-newsletter-grid {
        grid-template-columns: 1fr;
    }

    .dpo-card {
        min-height: auto;
    }

    .dpo-card-title {
        min-height: auto;
    }

    .dpo-card img {
        height: 220px;
    }


    /* =====================================================
       VIDEO
    ===================================================== */

    .dpo-video img,
    .dpo-video iframe,
    .dpo-video video {
        height: 260px;
    }


    /* =====================================================
       FEATURE ACTIVITY
    ===================================================== */

    .dpo-pa-feature-main-image,
    .dpo-pa-simple-images {
        width: 38%;
        max-width: 38%;

        margin-right: 20px;
        margin-bottom: 16px;
    }

    .dpo-pa-feature-top.reverse .dpo-pa-feature-main-image,

    .dpo-pa-simple-layout.reverse .dpo-pa-simple-images {
        margin-right: 0;
        margin-left: 20px;
    }

    .dpo-pa-feature-title {
        font-size: 22px;
    }

    .dpo-pa-feature-body {
        font-size: 13px;

        line-height: 1.55;
    }


    /* =====================================================
       THREE IMAGE GRIDS

       Still HORIZONTAL.
    ===================================================== */

    body.dpo-body .dpo-pa-feature-grid,

    body.dpo-body .dpo-pa-three-image-grid {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 10px !important;
    }


    body.dpo-body .dpo-pa-text-image-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;
    }


    /* =====================================================
       OLD CONTENT
    ===================================================== */

    .dpo-two-column,
    .dpo-two-column.reverse,
    .dpo-image-row {
        grid-template-columns: 1fr;
    }

    .dpo-two-column img,
    .dpo-image-stack img,
    .dpo-image-row img,
    .dpo-wide-image img {
        width: 100%;

        height: auto !important;
    }
}


/* =========================================================
   SMALL MOBILE <= 575PX
========================================================= */

@media screen and (max-width: 575px) {

    /* =====================================================
       CONTAINER
    ===================================================== */

    .dpo-container {
        max-width: 100%;

        padding-left: 12px;
        padding-right: 12px;
    }


    /* =====================================================
       TEXT
    ===================================================== */

    .dpo-title {
        font-size: 22px;
    }

    .dpo-section-title {
        font-size: 18px;
    }


    /* =====================================================
       NEWSLETTER
    ===================================================== */

    .dpo-newsletter-grid {
        gap: 30px;

        padding:
            0 16px 30px;
    }

    .dpo-newsletter-image-wrap {
        height: auto;
    }

    .dpo-newsletter-image-wrap img {
        height: auto;

        object-fit: contain;
    }

    .dpo-newsletter-title {
        min-height: auto;

        font-size: 13px;
    }


    /* =====================================================
       NEWS
    ===================================================== */

    .dpo-news-band {
        padding: 20px 12px 28px;
    }

    .dpo-card img {
        height: 180px;
    }


    /* =====================================================
       VIDEO
    ===================================================== */

    .dpo-video img,
    .dpo-video iframe,
    .dpo-video video {
        height: 220px;
    }


    /* =====================================================
       PREVIOUS ACTIVITY ARTICLE
    ===================================================== */

    .dpo-pa-article {
        padding: 28px 0 32px;
    }


    /* =====================================================
       MAIN FEATURE IMAGE

       Move above text on small phones.
    ===================================================== */

    .dpo-pa-feature-main-image,
    .dpo-pa-feature-top.reverse .dpo-pa-feature-main-image,

    .dpo-pa-simple-images,
    .dpo-pa-simple-layout.reverse .dpo-pa-simple-images {
        float: none;

        width: 100%;
        max-width: 100%;

        margin:
            0 auto 22px;

        display: block;
    }

    .dpo-pa-simple-images {
        display: flex;
    }

    .dpo-pa-feature-main-image img,
    .dpo-pa-feature-main-image video,
    .dpo-pa-simple-images img,
    .dpo-pa-simple-images video {
        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        object-fit: contain !important;
    }

    .dpo-pa-feature-title {
        font-size: 21px;
    }

    .dpo-pa-feature-body {
        font-size: 14px;

        line-height: 1.6;
    }


    /* =====================================================
       3 IMAGE GRID

       KEEP 3 HORIZONTAL COLUMNS.
    ===================================================== */

    body.dpo-body .dpo-pa-feature-grid,

    body.dpo-body .dpo-pa-three-image-grid {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 6px !important;
    }


    body.dpo-body .dpo-pa-feature-grid .dpo-pa-feature-grid-item,

    body.dpo-body .dpo-pa-three-image-grid .dpo-pa-three-image-item {
        aspect-ratio: 4 / 3 !important;
    }


    body.dpo-body .dpo-pa-text-image-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 6px !important;
    }
}


/* =========================================================
   EXTRA SMALL MOBILE <= 420PX
========================================================= */

@media screen and (max-width: 420px) {

    /*
     * Keep the 3 horizontal images,
     * but make gaps smaller.
     */

    body.dpo-body .dpo-pa-feature-grid,

    body.dpo-body .dpo-pa-three-image-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 4px !important;
    }

    body.dpo-body .dpo-pa-text-image-grid {
        gap: 4px !important;
    }

    .dpo-pa-feature-title {
        font-size: 19px;
    }
}