/**
 * Styling specific to the feature column block.
 */

.page-container .feature-columns {
    padding: var(--spacing-12) var(--default-padding);
}

.feature-columns .text {
    grid-column: 3 / -3;
    display: flex;
    flex-flow: column nowrap;
    gap: var(--spacing-7);
    text-align: center;
    margin-bottom: var(--spacing-11);
    max-width: 100%;
}

.feature-columns .cards {
    grid-column: 1 / -1;
    display: flex;
    flex-flow: row nowrap;
    gap: var(--spacing-8);
    max-width: 100%;
}
.feature-columns .cards .card {
    flex: 1; /* Equal widths */
}

.feature-columns .carousel {
    grid-column: 1 / -1;
}
.feature-columns .carousel .carousel-content {
    display: flex;
    gap: var(--spacing-7);
}
.feature-columns .carousel .carousel-content .card {
    flex: 0 0 596px;
}
.feature-columns .carousel .carousel-controls {
    margin-top: var(--spacing-11);
}
.product.feature-columns .text .heading {
    margin-bottom: var(--spacing-7);
}

/* Breakpoints L and smaller */

@media screen and (min-width: 0px) and (max-width: 1320px) {
    .feature-columns .text {
        grid-column: 2 / -2;
    }
}

/* Breakpoints M and S */

@media screen and (min-width: 0px) and (max-width: 1080px) {
    .feature-columns .cards {
        gap: var(--spacing-7);
    }

    .feature-columns .carousel .carousel-content {
        margin: 0 calc(var(--default-padding) * -1);
        padding: 0 var(--default-padding);
    }
}

/* Breakpoint S */
@media screen and (min-width: 0px) and (max-width: 768px) {
    .feature-columns .text {
        grid-column: 1 / -1;
    }

    .feature-columns .carousel .carousel-content .card {
        flex-basis: 240px;
    }
    .feature-columns .cards {
        flex-direction: column;
    }

    .feature-columns .cards .card {
        flex-basis: unset;
    }
}