.cards-2cols__main-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: center;
}
@media screen and (min-width: 767px) {
    .cards-2cols__main-wrapper {
        gap: 3rem;
    }
}

.cards-2cols__card {
    background: var(--gray-50);
    border-radius: 0.75rem;
    padding: 2.5rem;
}
@media screen and (min-width: 1023px) {
    .cards-2cols__card {
        border-radius: 1.125rem;
        flex: 0 1 calc((100% - 3rem) / 2);
        padding: 3rem;
    }
}

{###########################################################################}
{###########################   CARD THEMES   ###############################}
{###########################################################################}

/* #region CARD DEFAULT */
.cards-2cols__card--default {
    display: flex;
    flex-direction: column;
}

.cards-2cols__description p {
    color: var(--gray-600);
    text-align: center;
}
@media screen and (min-width: 767px) {
    .cards-2cols__description p {
        font-size: 2rem;
    }
}

.cards-2cols__media {
    aspect-ratio: 3/2;
    line-height: 0;
    margin-block-start: 1.5rem;
    width: 100%;
}
@media screen and (min-width: 767px) {
    .cards-2cols__media {
        margin-block-start: 3rem;
    }
}

.cards-2cols__image {
    aspect-ratio: 3 / 2;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.cards-2cols__footnote-wrapper {
    align-items: flex-end;
    display: flex;
    flex: 1;
    justify-content: center;
    text-align: center;
}

.cards-2cols__footnote {
    font-size: 0.75rem;
    margin: 1.5rem 0 0;
}
@media screen and (min-width: 767px) {
    .cards-2cols__footnote {
        font-size: 1rem;
    }
}

/* #endregion */

/* #region CARD REVIEWS */
.cards-2cols__reviews {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cards-2cols__review {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cards-2cols__text p {
    color: var(--gray-600);
    font-style: italic;
    margin: 0;
}
@media screen and (min-width: 767px) {
    .cards-2cols__text p {
        font-size: 1.125rem;
    }
}

.cards-2cols__review-tool {
    align-self: flex-end;
    aspect-ratio: 3/2;
    line-height: 0;
    max-height: 7.125rem; /* 114px */
}

.cards-2cols__review-icon {
    height: 100%;
    object-fit: contain;
    width: 100%;
}
/* #endregion */

/* #region CARD OUR VALUES */
.cards-2cols__card--values {
    background: var(--white);
    outline: 1px solid var(--blue-200);
}

.cards-2cols__title--values {
    color: var(--blue-200);
}

.cards-2cols__cta--values {
    margin-block-end: 1.5rem;
    text-align: center;
}
@media screen and (min-width: 767px) {
    .cards-2cols__cta--values {
        margin-block-end: 3rem;
        text-align: right;
    }
}
@media screen and (min-width: 1023px) {
    .cards-2cols__cta--values {
        margin-block-end: 0;
    }
}

.cards-2cols__cta--values a {
    color: var(--blue-200);
    font-weight: 700;
}

.cards-2cols__media--values {
    aspect-ratio: 3 / 2;
    line-height: 0;
    width: 100%;
}

.cards-2cols__image--values {
    border-radius: 0.75rem;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
@media screen and (min-width: 1023px) {
    .cards-2cols__image--values {
        border-radius: 1.25rem;
        bottom: -3rem;
        left: -3rem;
        position: relative;
    }
}

/* #endregion */

/* #region CARD CAROUSEL */
.cards-2cols__card--carousel {
    border-radius: 0.75rem;
    padding: 1.5rem;
}
@media screen and (min-width: 1023px) {
    .cards-2cols__card--carousel {
        border-radius: 1.125rem;
        flex: 0 1 calc((100% - 3rem) / 2);
        padding: 3rem;
    }
}

.cards-2cols__title--carousel {
    color: var(--gray-950);
}

.cards-2cols__media--carousel {
    display: grid;
    grid-template-columns: auto 2fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas: "desc desc desc""ctrl-l panel ctrl-r""nav nav nav";
    gap: 1.5rem 1rem;
}
@media screen and (min-width: 767px) {
    .cards-2cols__media--carousel {
        row-gap: 3rem;
    }
}

.cards-2cols__slide-descriptions {
    display: flex;
    gap: 1.5rem;
    grid-area: desc;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: scroll;

    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.cards-2cols__slide-descriptions::-webkit-scrollbar {
    display: none;
}

.cards-2cols__slide-description {
    display: block;
    flex: 1 0 100%;
    scroll-snap-align: start;
}

.cards-2cols__slide-description p {
    color: var(--gray-600);
    font-size: 0.875rem;
    margin: 0;
}
@media screen and (min-width: 767px) {
    .cards-2cols__slide-description p {
        font-size: 1.25rem;
    }
}

.cards-2cols__slides {
    display: flex;
    gap: 1.5rem;
    grid-area: panel;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: scroll;

    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.cards-2cols__slides::-webkit-scrollbar {
    display: none;
}

.cards-2cols__slide {
    display: block;
    flex: 1 0 100%;
    scroll-snap-align: start;
}

.cards-2cols__slide-media {
    aspect-ratio: 3 / 2;
    grid-area: image;
}

.cards-2cols__slide-image {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.cards-2cols__navigation {
    display: flex;
    gap: 1.5rem;
    grid-area: nav;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cards-2cols__nav-btn,
.cards-2cols__nav-btn:hover,
.cards-2cols__nav-btn:focus {
    padding: 0 0.5rem;
}

.cards-2cols__nav-icon {
    background: var(--gray-200);
    border-radius: 1.25rem;
    display: inline-block;
    height: 0.5rem;
    transition: background 0.3s ease-in-out;
    width: 0.5rem;
}

[data-active="true"] .cards-2cols__nav-icon {
    background: var(--gray-600);
}

.cards-2cols__left-control {
    align-self: center;
    grid-area: ctrl-l;
}

.cards-2cols__right-control {
    align-self: center;
    grid-area: ctrl-r;
}

.cards-2cols__left-control[data-status="on"] .cards-2cols__ctrl-icon-left path,
.cards-2cols__right-control[data-status="on"] .cards-2cols__ctrl-icon-right path {
    fill: var(--gray-600);
}

.cards-2cols__ctrl-icon-left,
.cards-2cols__ctrl-icon-right {
    width: 1rem;
}
@media screen and (min-width: 767px) {
    .cards-2cols__ctrl-icon-left,
    .cards-2cols__ctrl-icon-right {
        width: 1.75rem;
    }
}

.cards-2cols__ctrl-icon-left path,
.cards-2cols__ctrl-icon-right path {
    fill: var(--gray-200);
}

/* #endregion */