/* ==========================================================================
   blocks.css - Composite content blocks & page sections for councilsepa.org
   Interior banners, social frame, decorative gradients, the
   fixed / icon / news-feed card systems, and content blocks.
   Load after the foundation files.
   ========================================================================== */

/* ==========================================================================
   DECORATIVE GRADIENTS
   ========================================================================== */

.bg-gradient {
    background: #e6f9ff;
    background: linear-gradient(316deg, rgba(230, 249, 255, 1) 0%, rgba(251, 247, 235, 1) 80%, rgba(255, 252, 252, 1) 96%);
}

.bg-gradient-vivid {
    background: linear-gradient(316deg, rgba(230, 249, 255, 1) 0%, rgba(251, 247, 235, 1) 80%, rgba(255, 252, 252, 1) 96%);
}

.has-gradient {
    position: relative;
}

.has-gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    pointer-events: none;
}

/* ==========================================================================
   SOCIAL FRAME
   ========================================================================== */

section.social-frame h4 {
    font-size: 25px;
    letter-spacing: .200000003px;
    line-height: 40px;
    @media (min-width: 768px) {
        font-size: 32px;
        letter-spacing: .200000003px;
        line-height: 51px;
    }
    @media (min-width: 1200px) {
        font-size: 36px;
        letter-spacing: .01em;
        line-height: 47px;
    }
}

section.social-frame {
    position: relative;
    height: 350px;
    /* Stack the gradient OVER the photo, both anchored to bottom */
    background-image: url("https://www.councilsepa.org/wp-content/themes/elevation-framework/build/images/home-social-feed-gradient.90ff26e9.png"), url("https://www.councilsepa.org/wp-content/smush-webp/2024/04/social-feed-image.jpg.webp");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: bottom center, bottom center;
}

@media (min-width: 769px) {
    section.social-frame {
        height: 500px;
    }
}

@media (min-width: 1200px) {
    section.social-frame {
        height: 762px;
    }
}

/* ==========================================================================
   INTERIOR BANNER
   ========================================================================== */

.interior-banner h1 {
    font-size: 36px;
    @media (min-width: 768px) {
        font-size: 46px;
    }
    @media (min-width: 1200px) {
        font-size: 64px;
    }
}

/* Interior Banner Container Heights */
.interior-banner .container {
    min-height: 462px;
    padding: 280px 10 40px;
    position: relative;
    z-index: 2;
}

@media (min-width: 768px) {
    .interior-banner .container {
        min-height: 482px;
        padding: 340px 0 40px;
    }
}

@media (min-width: 1200px) {
    .interior-banner .container {
        min-height: 630px;
        padding: 440px 0 40px;
    }
}

/* Category variant */
.interior-banner.category .container {
    min-height: 500px;
    padding-bottom: 90px;
}

/* Fullscreen variant */
.interior-banner.interior-banner-fullscreen {
    min-height: 90vh;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.interior-banner.interior-banner-fullscreen .container {
    min-height: 90vh;
}

/* Interior Banner Bottom Overlay */
.interior-banner {
    position: relative;
    overflow: hidden;
}

.interior-banner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%271440%27 height=%27630%27 fill=%27none%27%3E%3Cmask id=%27a%27 width=%271440%27 height=%27630%27 x=%270%27 y=%270%27 maskUnits=%27userSpaceOnUse%27 style=%27mask-type:alpha%27%3E%3Cpath fill=%27%231F6444%27 d=%27M0 0h1440v630H0z%27/%3E%3C/mask%3E%3Cg mask=%27url%28%23a%29%27%3E%3Cpath fill=%27url%28%23b%29%27 d=%27M0 0h1440v630H0z%27/%3E%3Cpath fill=%27url%28%23c%29%27 d=%27M0 0h1440v631H0z%27 opacity=%27.7%27/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id=%27b%27 x1=%27720%27 x2=%27720%27 y1=%27-29%27 y2=%27630%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%23fff%27 stop-opacity=%27.9%27/%3E%3Cstop offset=%27.214%27 stop-color=%27%23fff%27 stop-opacity=%27.5%27/%3E%3Cstop offset=%27.408%27 stop-color=%27%23fff%27 stop-opacity=%270%27/%3E%3C/linearGradient%3E%3ClinearGradient id=%27c%27 x1=%27710%27 x2=%27710%27 y1=%27631%27 y2=%270%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop/%3E%3Cstop offset=%27.254%27 stop-color=%27%23363636%27 stop-opacity=%27.753%27/%3E%3Cstop offset=%27.852%27 stop-color=%27%23D9D9D9%27 stop-opacity=%270%27/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-position: center bottom;
    background-repeat: repeat-x;
    background-size: cover;
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   SECTION DIVIDER
   ========================================================================== */

.has-divider {
    position: relative;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%271440%27 height=%27118%27 fill=%27none%27%3E%3Cmask id=%27a%27 width=%271440%27 height=%27118%27 x=%270%27 y=%270%27 maskUnits=%27userSpaceOnUse%27 style=%27mask-type:alpha%27%3E%3Cpath fill=%27%23D9D9D9%27 d=%27M0 0h1440v118H0z%27/%3E%3C/mask%3E%3Cg mask=%27url%28%23a%29%27%3E%3Cg filter=%27url%28%23b%29%27 opacity=%27.6%27%3E%3Cpath fill=%27%23fff%27 d=%27M0 56c720 72 720 72 1440 0v66H0z%27/%3E%3C/g%3E%3Cg filter=%27url%28%23c%29%27 opacity=%27.4%27%3E%3Cpath fill=%27%23fff%27 d=%27M0 39c720 90.545 720 90.545 1440 0v83H0z%27/%3E%3C/g%3E%3Cg filter=%27url%28%23d%29%27%3E%3Cpath fill=%27%23fff%27 d=%27M0 71c720 52 720 52 1440 0v52H0z%27/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id=%27b%27 width=%271472%27 height=%2798%27 x=%27-16%27 y=%2736%27 color-interpolation-filters=%27sRGB%27 filterUnits=%27userSpaceOnUse%27%3E%3CfeFlood flood-opacity=%270%27 result=%27BackgroundImageFix%27/%3E%3CfeColorMatrix in=%27SourceAlpha%27 result=%27hardAlpha%27 values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0%27/%3E%3CfeOffset dy=%27-4%27/%3E%3CfeGaussianBlur stdDeviation=%278%27/%3E%3CfeComposite in2=%27hardAlpha%27 operator=%27out%27/%3E%3CfeColorMatrix values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0%27/%3E%3CfeBlend in2=%27BackgroundImageFix%27 result=%27effect1_dropShadow_3325_1092%27/%3E%3CfeBlend in=%27SourceGraphic%27 in2=%27effect1_dropShadow_3325_1092%27 result=%27shape%27/%3E%3C/filter%3E%3Cfilter id=%27c%27 width=%271508%27 height=%27151%27 x=%27-34%27 y=%27-5%27 color-interpolation-filters=%27sRGB%27 filterUnits=%27userSpaceOnUse%27%3E%3CfeFlood flood-opacity=%270%27 result=%27BackgroundImageFix%27/%3E%3CfeColorMatrix in=%27SourceAlpha%27 result=%27hardAlpha%27 values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0%27/%3E%3CfeOffset dy=%27-10%27/%3E%3CfeGaussianBlur stdDeviation=%2717%27/%3E%3CfeComposite in2=%27hardAlpha%27 operator=%27out%27/%3E%3CfeColorMatrix values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0%27/%3E%3CfeBlend in2=%27BackgroundImageFix%27 result=%27effect1_dropShadow_3325_1092%27/%3E%3CfeBlend in=%27SourceGraphic%27 in2=%27effect1_dropShadow_3325_1092%27 result=%27shape%27/%3E%3C/filter%3E%3Cfilter id=%27d%27 width=%271460%27 height=%2772%27 x=%27-10%27 y=%2754%27 color-interpolation-filters=%27sRGB%27 filterUnits=%27userSpaceOnUse%27%3E%3CfeFlood flood-opacity=%270%27 result=%27BackgroundImageFix%27/%3E%3CfeColorMatrix in=%27SourceAlpha%27 result=%27hardAlpha%27 values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0%27/%3E%3CfeOffset dy=%27-7%27/%3E%3CfeGaussianBlur stdDeviation=%275%27/%3E%3CfeComposite in2=%27hardAlpha%27 operator=%27out%27/%3E%3CfeColorMatrix values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0%27/%3E%3CfeBlend in2=%27BackgroundImageFix%27 result=%27effect1_dropShadow_3325_1092%27/%3E%3CfeBlend in=%27SourceGraphic%27 in2=%27effect1_dropShadow_3325_1092%27 result=%27shape%27/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto;
    padding-bottom: 150px !important;
}

/* ==========================================================================
   1. FIXED CARDS
   ========================================================================== */

.fixed-cards .card-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.fixed-cards .card {
    position: relative;
    background: #ffffff;
    border: 0;
    border-radius: 1px;
    border-top-style: solid;
    border-top-width: 4px;
    border-top-color: transparent;
    padding: 0;
    overflow: hidden;
    box-shadow: 8px 8px 29px 0 rgba(0, 0, 0, 0.102);
    display: flex;
    flex-direction: column;
    min-height: 250px;
    height: 100%;
    transform: scale(1);
    transition: all 0.4s ease;
    width: 100%;
    @media (min-width: 768px) {
        width: calc(50% - 0.75rem);
    }
    @media (min-width: 1200px) {
        width: calc(33.333% - 1rem);
    }
}

.fixed-cards .card:hover {
    border-top-color: #00543d;
    transform: translateY(-5px) scale(1.07);
}

/* Make entire card clickable */
.fixed-cards .card a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card icon - visible by default, hidden on hover */
.fixed-cards .card .card-icon {
    overflow: hidden;
    max-height: 150px;
    opacity: 1;
    transition: all 0.4s ease;
    padding: 10px 40px;
}

.fixed-cards .card .card-icon i {
    font-size: 2.5rem;
    color: var(--card-gray-800);
}

.fixed-cards .card:hover .card-icon {
    max-height: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0;
}

/* Card body */
.fixed-cards .card .card-body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    padding: 0 40px;
}

.fixed-cards .card .card-title {
    font-size: 28px;
    font-weight: 600;
    color: black;
    margin-bottom: 0.5rem;
    transition: all 0.4s ease;
}

.fixed-cards .card:hover .card-title {
    font-size: 36px;
    margin-bottom: 20px;
}

.fixed-cards .card .card-text {
    font-size: 0.9rem;
    color: var(--bs-gray-600);
    line-height: 1.5;
    margin-bottom: 0;
}

/* Arrow button - visible by default, hidden on hover */
.fixed-cards .card .arrow-button {
    position: absolute;
    bottom: 0;
    right: 20px;
    transition: all 1s ease;
}

.fixed-cards .card .arrow-button i {
    font-size: 36px;
    color: #00543d;
    opacity: 1;
    transition: all 0.2s ease;
}

.fixed-cards .card:hover .arrow-button i {
    opacity: 0;
}

/* ==========================================================================
   2. ICON CARDS (Base Styles)
   ========================================================================== */

.icon-cards {
    background-color: #e3efe3;
    padding: 3rem 0.75rem;
}

@media (max-width: 575px) {
    .icon-cards {
        padding-left: 12px;
        padding-right: 12px;
    }
}

.icon-cards .card-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 7rem 3rem;
    align-items: stretch;
    justify-content: center;
    padding-top: calc(24px + 1.5rem);
}

.icon-cards .card {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background-color: #ffffff;
    border: none;
    border-radius: 2px 2px 2px 30px;
    overflow: visible;
    transition: var(--card-transition);
    box-sizing: border-box;
}

@media (min-width: 576px) and (max-width: 767px) {
    .icon-cards .card {
        width: 476px;
        max-width: 100%;
        height: 372px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .icon-cards .card {
        width: 316px;
        max-width: 100%;
        height: 415px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .icon-cards .card {
        width: 436px;
        max-width: 100%;
        height: 344px;
    }
}

@media (min-width: 1200px) {
    .icon-cards .card {
        width: calc(25% - 2.25rem);
        max-width: none;
        height: 472px;
    }
}

.icon-cards .card:hover {
    background-color: #00543d;
}

.icon-cards .card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Icon Container - Absolutely Positioned (Vertical/Default) */
.icon-cards .card .card-icon {
    position: absolute;
    left: 30px;
    top: 0;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: #55298a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    z-index: 100;
    transition: var(--card-transition);
}

.icon-cards .card .card-icon i {
    font-size: 1.25rem;
    line-height: 1;
}

.icon-cards .card .card-icon img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

/* Card Body */
.icon-cards .card .card-body {
    padding: 46px 25px 30px;
    display: flex;
    flex-direction: column;
}

.icon-cards .card .card-title {
    font-size: 16px;
    letter-spacing: .200000003px;
    line-height: 26px;
    font-weight: 600;
    color: #55298a;
    margin-bottom: 18px;
    transition: var(--card-transition);
    @media (min-width: 768px) {
        font-size: 18px;
        letter-spacing: .200000003px;
        line-height: 27px;
    }
    @media (min-width: 1200px) {
        font-size: 19px;
        letter-spacing: .01em;
        line-height: 25px;
    }
}

.icon-cards .card:hover .card-title {
    color: #ffffff;
}

.icon-cards .card .card-text {
    color: #000000;
    letter-spacing: 0.02em;
    font-size: 14px;
    line-height: 18px;
    @media (min-width: 1200px) {
        letter-spacing: 0.05em;
        font-size: 16px;
        line-height: 22px;
    }
    margin: 0 0 1rem 0;
    transition: var(--card-transition);
    overflow-wrap: break-word;
    white-space: normal;
    word-break: break-word;
}

.icon-cards .card:hover .card-text {
    color: #ffffff;
}

/* Card Link (with arrow icon) */
.icon-cards .card-link {
    text-decoration: none;
    font-weight: 700;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-self: flex-end;
    align-self: flex-start;
    gap: 0.5rem;
    transition: var(--card-transition);
}

.icon-cards .card-link::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' fill='none'%3E%3Cpath fill='%231E1E1E' d='M8.821 1a.75.75 0 0 0-.75-.75h-6.75a.75.75 0 1 0 0 1.5h6v6a.75.75 0 1 0 1.5 0zm-7.29 7.601 7.07-7.07L7.541.47.47 7.54z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: var(--card-transition);
}

.icon-cards .card .card-link {
    color: #000000;
}

.icon-cards .card:hover .card-link {
    color: #ffffff;
}

.icon-cards .card:hover .card-link::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' fill='none'%3E%3Cpath fill='%23ffffff' d='M8.821 1a.75.75 0 0 0-.75-.75h-6.75a.75.75 0 1 0 0 1.5h6v6a.75.75 0 1 0 1.5 0zm-7.29 7.601 7.07-7.07L7.541.47.47 7.54z'/%3E%3C/svg%3E");
}

/* 2a. ICON CARDS - Color Variants */

/* Green Variant */
.icon-cards.icon-cards--green .card:hover {
    background-color: #00543d;
}

/* Teal Variant */
.icon-cards.icon-cards--teal {
    background-color: #55298a !important;
    color: #ffffff;
}

.icon-cards.icon-cards--teal .card .card-icon {
    background-color: #20cb98 !important;
}

.icon-cards.icon-cards--teal .card:hover {
    background-color: #f5ebf3 !important;
    color: #000000 !important;
}

.icon-cards.icon-cards--teal .card:hover .card-title {
    color: #000000 !important;
}

.icon-cards.icon-cards--teal .card:hover .card-text {
    color: #000000 !important;
}

.icon-cards.icon-cards--teal .card:hover .card-link {
    color: #000000 !important;
}

.icon-cards.icon-cards--teal .card:hover .card-link::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' fill='none'%3E%3Cpath fill='%231E1E1E' d='M8.821 1a.75.75 0 0 0-.75-.75h-6.75a.75.75 0 1 0 0 1.5h6v6a.75.75 0 1 0 1.5 0zm-7.29 7.601 7.07-7.07L7.541.47.47 7.54z'/%3E%3C/svg%3E");
}

/* 2b. ICON CARDS - Horizontal Variant */
.icon-cards.icon-cards--horizontal {
    background-color: #ffffff;
}

.icon-cards.icon-cards--horizontal .card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 0;
    padding-left: calc(24px + 1.5rem);
}

.icon-cards.icon-cards--horizontal .card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background-color: #f5ebf3;
    border: none;
    border-radius: 2px 2px 2px 35px !important;
    width: 100% !important;
    height: auto !important;
}

.icon-cards.icon-cards--horizontal .card:hover {
    background-color: #ffffff;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

/* Icon positioning for horizontal - on left edge */
.icon-cards.icon-cards--horizontal .card .card-icon {
    top: 35px;
    left: 0;
    transform: translateX(-50%);
}

.icon-cards.icon-cards--horizontal .card:hover .card-icon {
    background-color: #55298a;
}

/* Card body for horizontal */
.icon-cards.icon-cards--horizontal .card .card-body {
    flex: 1;
    padding: 35px 80px 39px 85px;
    transition: var(--card-transition);
}

.icon-cards.icon-cards--horizontal .card .card-title {
    color: #000000;
}

.icon-cards.icon-cards--horizontal .card:hover .card-title {
    color: #000000;
}

.icon-cards.icon-cards--horizontal .card .card-text {
    color: #000000;
}

.icon-cards.icon-cards--horizontal .card:hover .card-text {
    color: #000000;
}

.icon-cards.icon-cards--horizontal .card .card-link {
    color: #000000;
}

.icon-cards.icon-cards--horizontal .card:hover .card-link {
    color: #000000;
}

.icon-cards.icon-cards--horizontal .card:hover .card-link::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' fill='none'%3E%3Cpath fill='%231E1E1E' d='M8.821 1a.75.75 0 0 0-.75-.75h-6.75a.75.75 0 1 0 0 1.5h6v6a.75.75 0 1 0 1.5 0zm-7.29 7.601 7.07-7.07L7.541.47.47 7.54z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   3. NEWS FEED CARDS
   ========================================================================== */

.news-feed .card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.news-feed .card {
    display: flex;
    flex-direction: row;
    background: rgba(30, 30, 30, .4);
    border: none;
    border-radius: 2px 2px 2px 35px;
    overflow: hidden;
    transition: var(--card-transition);
    max-width: 436px;
}

.news-feed .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-lg);
}

.news-feed .card a {
    display: flex;
    flex-direction: row;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

/* Image container */
.news-feed .card-img {
    flex: 0 0 140px;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.news-feed .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.news-feed .card:hover .card-img img {
    transform: scale(1.05);
}

/* Dark overlay on image */
.news-feed .card-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(52, 58, 64, 0.4) 100%);
}

/* Card body */
.news-feed .card-body {
    flex: 1;
    padding: 21px 36px 21px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-feed .card-date {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.news-feed .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-white);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.news-feed .card-category {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Tags within news feed */
.news-feed .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.news-feed .card-tag {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
}

/* ==========================================================================
   4. CARD UTILITY CLASSES
   ========================================================================== */

.card--square {
    border-radius: 0 !important;
}

.card--elevated {
    box-shadow: var(--bs-box-shadow-sm);
}

/* ==========================================================================
   5. RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 575.98px) {
    .fixed-cards,
    .icon-cards,
    .news-feed {
        grid-template-columns: 1fr;
    }
    .news-feed .card {
        flex-direction: column;
    }
    .news-feed .card-img {
        flex: 0 0 160px;
        width: 100%;
    }
    .icon-cards.icon-cards--horizontal {
        padding-left: 1.5rem;
        padding-top: calc(24px + 1.5rem);
    }
    .icon-cards.icon-cards--horizontal .card {
        flex-direction: column;
    }
    .icon-cards.icon-cards--horizontal .card .card-icon {
        top: 0;
        left: 30px;
        transform: translateY(-50%);
    }
    .icon-cards.icon-cards--horizontal .card .card-body {
        padding: 2rem 1.5rem 1.5rem;
    }
}

/* ==========================================================================
   6. ACCESSIBILITY
   ========================================================================== */

.fixed-cards .card:focus-within,
.icon-cards .card:focus-within,
.news-feed .card:focus-within {
    box-shadow: 0 0 0 0.5rem rgba(13, 110, 253, 0.25);
}

@media (prefers-reduced-motion: reduce) {
    .fixed-cards .card,
    .icon-cards .card,
    .news-feed .card,
    .fixed-cards .card::before,
    .news-feed .card-img img,
    .icon-cards .card .card-icon,
    .icon-cards .card .card__body {
        transition: none;
    }
}

/* ==========================================================================
   7. CONTENT BLOCKS (photo / figure / column layout)
   ========================================================================== */

main figure img {
  max-width: 100%;
}

.block__photo {
    height: 100%;
}

.block__photo img {
    display: block;
    margin: 0 auto;
}

@media (min-width: 1200px) {
    .block__photo img {
        height: 100%;
        object-fit: cover;
        object-position: center;
        width: 100%;
    }
}