.content-new-design {
    .container-xl {
        padding-left: 12px;
        padding-right: 12px;
    }
}
.header-row-default-component {
    position: relative;
    background-color: transparent;
    padding: var(--spacing-4xl) var(--spacing-xl);
    gap: var(--spacing-6xl);
    @media (min-width: 768px) {
        padding: var(--spacing-7xl) var(--spacing-4xl);
    }
    @media (min-width: 1024px) {
        padding: var(--spacing-7xl) var(--spacing-8xl);
    }
}
.header-row-default-component.light {
    background-color: var(--color-white);
}
.header-row-default-component.dark {
    background-color: var(--color-gray-950);
}
.header-bg-image-cover {
    background-image: var(--header-bg-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.header-row-default-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.header-row-default-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xl);
    @media (min-width: 768px) {
        gap: var(--spacing-6xl);
    }
    @media (min-width: 1024px) {
        max-width: var(--container-max-width-desktop);
        padding-right: var(--spacing-4xl);
        padding-left: var(--spacing-4xl);
        gap: var(--spacing-7xl);
        flex-direction: row;
        align-items: center;
        margin: 0 auto;
    }
}
.header-row-default-detail {
    padding-right: var(--spacing-xl);
    padding-left: var(--spacing-xl);
    gap: var(--spacing-2xl);
    display: flex;
    flex-direction: column;
    @media (min-width: 768px) {
        padding-right: var(--spacing-none);
        padding-left: var(--spacing-none);
        [lang="ar"] & {gap: var(--spacing-3xl);}
    }
    @media (min-width: 1024px) {
        gap: var(--spacing-3xl);
        align-items: flex-start;
        flex: 1;
    }
}
.detail-no-inset {
    @media (min-width: 1024px) {
        padding-bottom: 64px;
    }
}
.header-row-default-media {
    width: var(--width-xxs);
    height: var(--width-xxs);
    border-radius: var(--radius-3xl);
    margin: 0 auto;
    align-content: center;
    @media (max-width: 352px) {
        width: 100%;
        height: 100%;
    }
    @media (min-width: 768px) {
        width: var(--width-sm);
        height: var(--width-sm);
    }
    @media (min-width: 1024px) {
        max-width: var(--width-md);
        height: var(--width-md);
        flex: 1;
    }
}
.media-placeholder {
    background: var(--fg-disabled-subtle);
    color: var(--text-primary) !important;
}
.detail-heading {
    gap: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    @media (min-width: 768px) {
        gap: var(--spacing-lg);
    }
}
.detail-eyebrow {
    letter-spacing: 0.0125em;
    font: var(--english-text-sm-semibold);
    [lang="ar"] & {font: var(--arabic-text-sm-semibold);}
    color: var(--color-teal-700);
    .dark & {color: var(--color-gray-dark-700-dark);}
    @media (min-width: 768px) {
        font: var(--english-text-md-semibold);
        [lang="ar"] &s {font: var(--arabic-text-md-semibold);}
    }
}
.detail-title {
    letter-spacing: -0.02em;
    color: var(--text-primary);
    .dark & {color: var(--color-gray-900-dark);}
    font: var(--english-display-md-semibold);
    [lang="ar"] & {font: var(--arabic-display-md-semibold);}
    margin-bottom: 0;
    @media (min-width: 768px) {
        font: var(--english-display-xl-semibold);
        [lang="ar"] & {font: var(--arabic-display-xl-semibold);}
    }
}
.detail-subtitle {
    letter-spacing: 0.0325em;
    color: var(--text-primary);
    .dark & {color: var(--color-gray-900-dark);}
    margin-bottom: 0;
    font: var(--english-text-sm-regular);
    [lang="ar"] & {
        font: var(--arabic-text-lg-regular);
        letter-spacing: 0em;
    }
    @media (min-width: 768px) {
        font: var(--english-text-lg-regular);
        [lang="ar"] & {font: var(--arabic-text-lg-regular);}
    }
}
.detail-buttons {
    gap: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    width: fit-content;
    @media (min-width: 768px) {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 24px;
    }
    .button {
        width: 100%;
        @media (min-width: 768px) {
            width: fit-content;
        }
    }
.button--with-icon-before {
        flex-direction: row-reverse;
    }
    .btn-with-arrow span {
        display: inline-flex;
        align-items: center;
    }
}
.detail-centered {
    text-align: center;
    align-items: center;

    @media (min-width: 1024px) {
        max-width: var(--heading-max-width);
        margin: 0 auto
    }
    .detail-heading {
        align-items: center;
    }
}
.component-no-inset {
    padding-bottom: 0
}
.container-no-inset {
    @media (min-width: 1024px) {
        flex-direction: column;
    }
}
.media-no-inset {
    height: unset;
    aspect-ratio: 2 / 1;
    width: 100%;
    border-bottom-left-radius: var(--radius-none);
    border-bottom-right-radius: var(--radius-none);
    overflow: hidden;
}
.media-no-inset__square {
    border-bottom-left-radius: var(--radius-none);
    border-bottom-right-radius: var(--radius-none);
    aspect-ratio: 1 / 1;
    height: fit-content;
    align-self: end;
}
.detail-no-media {
    @media (min-width: 1024px) {
        max-width: var(--heading-max-width);
    }
}

/*H2 ROW BLOCK*/
.h2row-block-component {
    overflow: hidden;
    background-color: var(--color-gray-50);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-6xl) var(--spacing-xl);
    gap: var(--spacing-5xl);
    @media (min-width: 768px) {
        padding: var(--spacing-9xl) var(--spacing-4xl);
        gap: var(--spacing-7xl);
    }
    @media (min-width: 1024px) {
        padding: var(--spacing-9xl) var(--spacing-8xl);
    }
    &.no-gap-container {
        gap: 0;
    }
}
.h2row-block-component.light {
    background-color: var(--color-white);
}
.h2row-block-component.dark {
    background-color: var(--color-gray-950);
}
.h2row-block-component__colored {
    background-color: var(--secondary-bg-color) !important;
    .h2row-block-cards-container {
        padding: 0;
    }
    .h2row-card {
        background-color: var(--color-gray-50);
        border-radius: 12px;
        padding-bottom: 24px;
        .light & {
            background-color: var(--color-white) !important;
        }
        .dark & {
            background-color: var(--color-gray-950) !important;
        }
    }
    .h2row-card-caption {
        padding: 0 24px;
    }
    .h2row-card-heading {
        padding: 0 24px;
    }
    .h2row-card-buttons {
        padding: 0 24px;
    }
}
.h2row-block-container {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: var(--spacing-4xl);
    width: 100%;
    @media (min-width: 1024px) {
        max-width: var(--spacing-320);
        padding-right: var(--spacing-4xl);
        padding-left: var(--spacing-4xl);
    }
}
.h2row-block-container__centered {
    text-align: center;
    align-items: center;
}
.h2row-block-heading {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    @media (min-width: 768px) {
        max-width: 100%;
    }
}
.h2row-block-heading__centered {
    align-items: center;
}
.h2row-block-icons {
    display: flex;
    align-items: end;
    width: fit-content;
    gap: var(--spacing-lg);
}
.h2row-block-icon {
    [lang="ar"] & {transform: scaleX(-1)}
    @media (min-width: 1024px) {
        gap: var(--spacing-md);
    }
}
.block-icon {
    .dark & {
        filter: invert(83%) sepia(5%) saturate(118%) hue-rotate(190deg) brightness(93%) contrast(86%);
    }
}
.block-icon-size-24 {
    width: 24px;
    height: 24px;
}
.block-icon-size-48 {
    width: 48px;
    height: 48px;
}
.block-icon-size-96 {
    width: 96px;
    height: 96px;
}
.h2row-block-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    @media (min-width: 768px) {
    gap: var(--spacing-lg);
    }
}
.h2row-block-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}
.detail-title__h2 {
    color: var(--text-primary);
    .dark & {color: var(--color-gray-900-dark);}
    margin-bottom: 0;
    font: var(--english-display-sm-semibold);
    [lang="ar"] & {font: var(--arabic-display-sm-semibold);}
    @media (min-width: 768px) {
        font: var(--english-display-lg-semibold);
        [lang="ar"] & {font: var(--arabic-display-lg-semibold);}
    }
}
.detail-subtitle__h2 {
    color: var(--color-gray-700);
    .dark & {color: var(--color-gray-dark-700-dark);}
    letter-spacing: 0.03em;
    margin-bottom: 0;
    font: var(--english-text-md-regular);
    [lang="ar"] & {
        font: var(--arabic-text-md-regular);
        letter-spacing: 0em;
    }
    @media (min-width: 768px) {
        font: var(--english-text-lg-regular);
        [lang="ar"] & {
            font: var(--arabic-text-lg-regular);
            letter-spacing: 0em;
        }
    }
}
.detail-buttons__h2 {
    display: flex;
    flex-direction: column;
    width: fit-content;
    gap: var(--spacing-2xl);
    @media (min-width: 768px) {
        flex-direction: row;
        flex-wrap: wrap;
    }
    @media (min-width: 1024px) {
        gap: var(--spacing-3xl);
    }
    .button {
        width: 100%;
        @media (min-width: 768px) {
            width: fit-content;
        }
    }
}
.h2row-block-cards-container {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: var(--spacing-none) var(--spacing-xl);
    gap: var(--spacing-5xl);
    max-width: 100%;
    width: 100%;
    @media (min-width: 768px) {
        padding: var(--spacing-none);
        gap: var(--spacing-6xl);
    }
    @media (min-width: 1024px) {
        max-width: var(--spacing-320);
        gap: var(--spacing-7xl);
    }
}
.h2row-block-cards {
    display: flex;
    @media (min-width: 1024px) {
        padding: var(--spacing-none) var(--spacing-4xl);
    }
}
.h2row-block-cards__centered {
    text-align: center;
    .h2row-card__one-card {
        text-align: initial;
        /*align-items: center;*/
        /*text-align: center;*/
    }
    /*.h2row-card-buttons {*/
        /*margin: 0 auto;*/
    /*}*/
}
.h2row-block-cards-section {
    row-gap: var(--spacing-5xl);
    column-gap: var(--spacing-4xl);
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    @media (min-width: 768px) {
        row-gap: var(--spacing-6xl);
    }
}
.h2row-block-cards-section.columns-3-section > * {
    @media (min-width: 1024px) {
        width: calc((100% - (2 * var(--spacing-4xl))) / 3);
    }
}
.h2row-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: var(--spacing-xl);
    @media (min-width: 768px) {
        gap: var(--spacing-2xl);
        width: calc((100% - var(--spacing-4xl)) / 2);
    }
}
.h2row-card__centered {
    align-items: center;
    margin: 0 auto;
}
.h2row-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.image-ratio-1-1 {
    width: 100%;
    aspect-ratio: 1;
    position: relative;
}
.image-ratio-3-2 {
    width: 100%;
    aspect-ratio: 3/2;
    position: relative;
}
.h2row-img {
    border-radius: var(--radius-xl);
}
.h2row-card-caption {
    letter-spacing: 0.0325em;
    margin-bottom: 0;
    color: var(--color-gray-500);
    .dark & {color: #94969C;}
    font: var(--english-text-xs-regular);
    line-height: 18px;
    [lang="ar"] & {
        font: var(--arabic-text-xs-regular);
        letter-spacing: 0em;
    }
    @media (min-width: 768px) {
        [lang="ar"] & {font: var(--arabic-text-xs-regular);}
    }
}
.h2row-card-heading {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    @media (min-width: 768px) {
        gap: var(--spacing-xl);
    }
}
.h2row-card-heading__centered {
    align-items: center;
}
.h2row-card-icons {
    display: flex;
    align-items: end;
    gap: var(--spacing-lg);
    @media (min-width: 768px) {
        width: fit-content;
    }
}
.h2row-card-icon {
    @media (min-width: 1024px) {
        gap: var(--spacing-md);
    }
}
.h2-card-icon {
    .dark & {
        filter: invert(83%) sepia(5%) saturate(118%) hue-rotate(190deg) brightness(93%) contrast(86%);
    }
}
.h2-card-icon-size-24 {
    width: 24px;
    height: 24px;
}
.h2-card-icon-size-48 {
    width: 48px;
    height: 48px;
}
.h2-card-icon-size-96 {
    width: 96px;
    height: 96px;
}
.h2row-card-header-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    @media (min-width: 768px) {
        gap: var(--spacing-2xl);
    }
}
.h2row-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.h2row-card-eyebrow {
}
.h2row-card-title {
    color: var(--color-gray-900);
    .dark & {color: var(--color-gray-900-dark)}
    letter-spacing: 0.035em;
    margin-bottom: 0;
    line-height: 30px;
    font: var(--english-text-xl-medium);
    font-size: var(--font-size-text-xl);
    [lang="ar"] & {
        font: var(--arabic-text-xl-medium);
        letter-spacing: 0em;
        line-height: 30px;
        font-size: var(--font-size-text-xl);
    }
    @media (min-width: 768px) {
        font: var(--english-text-xl-medium);
        font-size: var(--font-size-text-xl);
        [lang="ar"] & {font: var(--arabic-text-xl-medium);}
        line-height: 30px;
    }
    @media (min-width: 1024px) {
        font: var(--english-text-xl-medium);
        font-size: var(--font-size-text-xl);
        [lang="ar"] & {font: var(--arabic-text-xl-medium);}
        line-height: 30px;
    }
}
.h2row-card-subtitle {
    p[data-block-key] {
        letter-spacing: 0.0325em;
        color: var(--color-gray-600);
        .dark & {color: #94969C}
        margin-bottom: 0;
        font: var(--english-text-sm-regular);
        [lang="ar"] & {
            font: var(--arabic-text-sm-regular);
            letter-spacing: 0em;
            line-height: 24px;
        }
        @media (min-width: 768px) {
            font: var(--english-text-md-regular);
            [lang="ar"] & {
                font: var(--arabic-text-md-regular);
                letter-spacing: 0em;
            }
        }
    }
}
.h2row-card-buttons {
    display: flex;
    flex-direction: column;
    width: fit-content;
    gap: var(--spacing-2xl);
    .button-link {
        padding-right: 0;
        padding-left: 0;
    }
}
.h2row__one-card-section {
    gap: var(--spacing-7xl);
}
.h2row-card__one-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    width: 100%;
    @media (min-width: 768px) {
        gap: var(--spacing-2xl);
    }
    @media (min-width: 1024px) {
        flex-direction: row;
        [lang="ar"] & {flex-direction: row-reverse;}
        gap: var(--spacing-7xl);
    }
    .h2row-card-title {
        font: var(--english-display-md-medium);
        [lang="ar"] & {font: var(--arabic-display-md-medium);}
        line-height: var(--line-height-display-sm);
        letter-spacing: -0.02em;
        @media (min-width: 768px) {
            font: var(--english-display-lg-medium);
            [lang="ar"] & {font: var(--arabic-display-lg-medium);}
            line-height: var(--line-height-display-md);
        }
    }
}
.h2row__one-card-media {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    height: fit-content;
    align-self: center;
    .img-fluid {
        border-radius: 25px;
        @media (min-width: 1024px) {
            border-radius: 12px;
        }
    }
    .caption {
        letter-spacing: 0.0325em;
        margin: 0 !important;
        color: var(--color-gray-500);
        .dark & {color: #94969C;}
        font: var(--english-text-xs-regular);
        line-height: 18px;
        [lang="ar"] & {
            font: var(--arabic-text-xs-regular);
            letter-spacing: 0em;
        }
        @media (min-width: 768px) {
            [lang="ar"] & {font: var(--arabic-text-xs-regular);}
        }
    }
}
.h2row__one-card-content {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    @media (min-width: 768px) {
        gap: var(--spacing-2xl);
    }
    @media (min-width: 1024px) {
        align-self: center;
    }
}
.h2row__one-card-heading {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    @media (min-width: 768px) {
        gap: var(--spacing-xl);
    }
}

/*CARD CAROUSEL*/
.card-carousel-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xl);
    margin: 0 -16px;
    @media (min-width: 768px) {
        margin: 0 -32px;
    }
    @media (min-width: 1024px) {
        margin: 0 -80px;
    }
}
.h2row__carousel-card {
    max-width: 311px;
    width: max-content;
    @media (min-width: 768px) {
        max-width: 336px;
    }
    @media (min-width: 1024px) {
        max-width: 384px;
    }
    &.no-image {
        padding: 24px;
        border-radius: 12px;
        gap: 0;
    }
}
.card-carousel-nav {
    width: 152px;
    margin: 0 auto;
    @media (min-width: 768px) {
        width: 176px;
    }
}
.card-carousel-nav-arrows {
    top: -8px;
    display: flex !important;
    position: relative !important;
    height: 56px;
    gap: var(--spacing-7xl);
    max-width: 176px;
    margin: 0 auto;

    .button-icon {
        top: 0 !important;
        margin-top: 0 !important;
        width: 56px !important;
        height: 56px !important;
        background-color: #FCFCFD !important;
        .dark & {background-color: #161B26 !important;}
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow:
            0px 2px 4px rgba(16, 24, 40, 0.06),
            0px 4px 8px rgba(16, 24, 40, 0.1) !important;
        border: none !important;
        cursor: pointer !important;
        transition: background-color 0.2s ease-in-out !important;
    }
    .button-icon:disabled {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
        pointer-events: none;
    }
    .button-icon:hover {
        background-color: #F0F0F1 !important;
        .dark & {background-color: #182230 !important;}
    }
    .button-icon svg {
        stroke: #344054 !important;
        .dark & {stroke: #CECFD2 !important;}
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
        width: 24px !important;
        height: 24px !important;
    }
    .button-icon.arrow-left svg {
        transform: rotate(180deg);
        [lang="ar"] & {transform: none;}
    }
    .button-icon.arrow-right svg {
        [lang="ar"] & {transform: rotate(180deg);}
    }
}
@media (min-width: 1024px) {
  .h2row-block-cards:has(> .cards-carousel-component) {
    padding: 0;
  }
}
.h2row-block-cards {
    .cards-carousel-component {
        position: relative;
        width: 100vw;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        max-width: none;
        overflow: hidden;
    }
    .cards-carousel-container {
        display: flex;
        flex-direction: column;
        gap: unset;
        max-width: none;
        width: 100%;
    }
    .cards-carousel-list {
        display: flex;
        gap: 32px;
        cursor: grab;
        overflow-x: scroll;
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;
        pointer-events: auto;
        width: 100%;
        padding: 0 32px;
        @media (min-width: 768px) {
            padding: 0 64px;
        }
        @media (min-width: 1024px) {
            padding: 0 192px;
        }
        @media (min-width: 1440px) {
            padding: 0 calc((100vw - 1280px) / 2 + 80px + 32px);
        }
    }
    .cards-carousel-list::-webkit-scrollbar {
        display: none;
    }
    .cards-carousel-list.grabbing {
        cursor: grabbing;
    }
    .paddlenav-arrow:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
}
/*HEADER ROW CENTRE*/
.header-row-center-component {
    background-color: var(--color-gray-50);
    padding: var(--spacing-7xl) var(--spacing-xl);
    gap: var(--spacing-3xl);
    @media (min-width: 768px) {
        padding: var(--spacing-9xl) var(--spacing-4xl);
    }
    @media (min-width: 1024px) {
        padding: var(--spacing-9xl) var(--spacing-8xl);
        gap: var(--spacing-3xl);
    }
}
.header-row-center-component.light {
    background-color: var(--color-white);
}
.header-row-center-component.dark {
    background-color: var(--color-gray-950);
}
.header-row-center-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    gap: var(--spacing-4xl);
    @media (min-width: 1024px) {
        max-width: var(--container-max-width-desktop);
        padding-right: var(--spacing-4xl);
        padding-left: var(--spacing-4xl);
    }
    .detail-buttons {
        gap: var(--spacing-2xl);
        align-items: center;
        .button {
            width: 100%;
            @media (min-width: 768px) {
                width: fit-content;
            }
        }
    }
}
.header-row-center-detail {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: var(--spacing-2xl);
}
.header-row-center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2xl);
    .detail-heading {
        align-items: center;
    }
    .detail-title__h2 {
        align-items: center;
        letter-spacing: 0.015em;
    }
}

/*HEADER ROW DEFAULT (flexible)*/
.header-row-flexible-component {
    background-color: var(--color-gray-50);
    padding: var(--spacing-7xl) var(--spacing-xl);
    @media (min-width: 768px) {
        padding: var(--spacing-9xl) var(--spacing-4xl);
    }
    @media (min-width: 1024px) {
        padding: var(--spacing-9xl) var(--spacing-8xl);
    }
}
.header-row-flexible-component__colored {
    background-color: var(--header-row-flexible-bg-color) !important;
}
.header-row-flexible-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-3xl);
    border-radius: var(--radius-2xl);
    gap: var(--spacing-5xl);
    max-width: var(--container-max-width-desktop);
    margin: 0 auto;
    @media (min-width: 768px) {
        padding: var(--spacing-6xl);
        border-radius: var(--radius-4xl);
        gap: var(--spacing-7xl);
    }
    @media (min-width: 1024px) {
        padding: var(--spacing-7xl);
        flex-direction: row;
    }
}
.header-row-flexible-container.light {
    background-color: var(--color-white);
}
.header-row-flexible-container.dark {
    background-color: var(--color-gray-950);
}
.header-row-flexible-container.media_first {
    flex-direction: column-reverse;
    @media (min-width: 1024px) {
        flex-direction: row-reverse;
    }
}
.header-row-flexible-detail {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
    gap: var(--spacing-4xl);
    @media (min-width: 1024px) {
        max-width: 528px;
    }
}
.header-row-flexible-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}
.flexible-heading {
    gap: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    @media (min-width: 768px) {
        gap: var(--spacing-lg);
    }
}
.flexible-heading-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    @media (max-width: 767px) {
        .detail-title__h2 {
            font-size: 36px;
            line-height: 44px;
        }
        .detail-subtitle__h2 {
            letter-spacing: 0.0325em;
        }
    }
    @media (min-width: 1024px) {
        gap: var(--spacing-xl);
    }
}
.header-row-flexible-media {
    /*background-color: var(--fg-disabled-subtle);*/
    border-radius: var(--radius-3xl);
    margin: 0 auto;
    align-content: center;
    width: 100%;
    overflow: hidden;
    position: relative;
    max-width: var(--width-md);
    .img-fluid {
        border-radius: var(--radius-3xl);
        max-width: 100%;
        height: 100%;
        width: max-content;
        object-fit: cover;
    }
    @media (min-width: 1024px) {
        width: 50%;
        flex-shrink: 1;
    }
}
.flexible-media-placeholder {
    background: var(--fg-disabled-subtle);
    color: var(--text-primary) !important;
}
.media-ratio-1-1 {
    .img-fluid {
        aspect-ratio: 1;
    }
}
.media-ratio-3-2 {
    .img-fluid {
        aspect-ratio: 3 / 2;
    }
}