.b-solutions-carousel {
    padding-block: 5rem;

    background-color: var(--background-color-mobile, var(--Golf-Blue));
    color: var(--Neutral-White);
}

.b-solutions-carousel .c-section-header {
    display: flex;
    flex-direction: column;

    gap: 0.75rem;

    margin-block-end: 2.25rem;
}

.b-solutions-carousel .c-section-header > * {
    margin-block: 0;
}

.b-solutions-carousel .c-title {
    color: var(--Neutral-White);

    font-family: var(--font-family-lora);
    font-weight: 400;

    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 140%;
    letter-spacing: -0.02em;
}

.b-solutions-carousel .c-description {
    font-family: var(--font-family-roboto);

    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4612rem;
    letter-spacing: 0.02em;
}

.b-solutions-carousel .c-description > * {
    margin-block: 0;
}

.b-solutions-carousel .c-description > * + * {
    margin-block-start: 1em;
}

.solutions-carousel-tags {
    position: relative;
    margin-inline: calc(var(--container-gutter) * -1);
}

.solutions-carousel__tags {
    margin-block-end: 2.375rem;
}

.solutions-carousel-tags__viewport {
    padding-inline: var(--slide-spacing);
}

.solutions-carousel-tags .embla__controls {
    display: none;
}

.solutions-carousel-tags-items {
    --slide-spacing: 1rem;
    --slide-block-gutter: 0.625rem;
}

.solutions-carousel-tags-item {
    display: inline-flex;
    flex: none;

    padding-block: var(--slide-block-gutter);
}

.solutions-tag {
    display: inline-flex;
    align-items: center;

    user-select: none;

    border: none;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;

    background: #001028;

    font-family: var(--font-family-roboto);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.225rem;
    letter-spacing: 0.02em;
		border: 0.0625rem solid #fff;

    color: var(--Neutral-White);
    text-align: center;
    text-decoration: none;

    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.solutions-tag * {
    pointer-events: none;
}

.solutions-tag__icon-wrap {
    display: none;
}

.solutions-tag__title-wrap {
    position: relative;
    display: block;
}

.solutions-tag__title {
    transition: opacity 0.3s ease-in-out;
}

.solutions-tag__title--active {
    position: absolute;
    inset: 0 -0.125rem;
    opacity: 0;

    font-weight: 500;
}

/* .solutions-tag__icon path {
    fill: currentColor;
} */

.solutions-tag:hover,
.solutions-tag:active {
    text-decoration: none;
    color: var(--Neutral-White);
}

@media (hover:hover) {
    .solutions-carousel-tags-item:hover .solutions-tag {
        color: var(--Neutral-White);
        transform: translateY(calc(var(--slide-block-gutter) * -1));
    }
}

@media (hover:hover) and (min-width: 992px) {
    .solutions-carousel-tags-item:hover .solutions-tag__title--active {
        font-weight: 400;
    }
}

.-active- .solutions-tag {
    background-color: var(--Pumpkin);
		border-color: var(--Pumpkin);
    color: var(--Neutral-White);

    transform: translateY(0) !important;
}

.-active- .solutions-tag__title {
    opacity: 0;
}

.-active- .solutions-tag__title--active {
    opacity: 1;
}

.solutions-carousel-images-item {
    flex: 0 0 100%;
}

.solution-image {
    text-align: center;
}

.solution-image-desktop,
.solution-image-mobile {
    max-width: 21rem;
    width: calc(100% - var(--container-gutter) * 2);
    height: auto;
    vertical-align: top;
}

.solution-image-desktop {
    display: none;
}

.solutions-carousel .c-button-collection {
    margin-block-start: 3.125rem;
    padding-inline: var(--container-gutter);

    text-align: center;
}

@media (min-width: 768px) {
    .solution-image-desktop {
        display: inline-block;
        width: 100%;
        max-width: 70rem;
    }

    .solution-image-mobile {
        display: none;
    }
}

@media (min-width: 992px) {
    .b-solutions-carousel {
			background-color: var(--background-color, var(--Golf-Blue));
        padding-block: 4.125rem 5.3125rem;
    }

    .b-solutions-carousel .c-section-header {
        text-align: center;
        gap: 1.4375rem;

        margin-block-end: 2.5rem;
    }

    .b-solutions-carousel .c-description {
        width: 100%;
        max-width: 56.25rem;
        margin-inline: auto;

        font-size: 1.125rem;
        line-height: 1.8787rem;
        letter-spacing: 0.02em;
    }

    .solutions-tag {
        background-color: transparent;
        font-weight: 300;

        flex-direction: column;
        gap: 1rem;

        padding: 0.625rem;

        color: var(--Neutral-400);
				border: 0;

        font-size: 1.125rem;
        line-height: 1.575rem;
        letter-spacing: 0.02em;
    }

    .solutions-tag__icon-wrap {
        display: inline-flex;
        padding: 0.5rem;

        border-radius: 0.375rem;

        transition: background-color 0.3s ease-in-out;
    }

    .solutions-tag__icon {
        display: inline-block;
        vertical-align: top;

        width: 2.5rem;
        height: 2.5rem;
    }

    .solutions-tag__icon path {
        fill: currentColor;
    }

    .-active- .solutions-tag {
        background-color: transparent;
    }

    .-active- .solutions-tag__icon-wrap {
        background-color: var(--Pumpkin);
    }

    .-active- .solutions-tag__title--active {
        font-weight: 500 !important;
    }
}

@media (min-width: 1200px) and (hover:hover) {
    .solutions-carousel-tags .embla-button:hover {
        background-color: var(--Neutral-White);
        color: var(--Golf-Blue);
    }
}

@media (min-width: 1200px) {
    .b-solutions-carousel {
        padding-block: 5rem;
    }

    .b-solutions-carousel .c-section-header {
        gap: 0.875rem;
        margin-block-end: 2.75rem;
    }

    .solutions-carousel-tags-mask-start {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 7.5rem), transparent calc(100% - 0rem));
        mask-image: linear-gradient(to left, #000 calc(100% - 7.5rem), transparent calc(100% - 0rem));
    }

    .solutions-carousel-tags-mask-end {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 7.5rem), transparent calc(100% - 0rem));
        mask-image: linear-gradient(to right, #000 calc(100% - 7.5rem), transparent calc(100% - 0rem));
    }

    .solutions-carousel-tags .embla__controls {
        display: block;
        position: absolute;

        inset-block-start: 5rem;

        width: 100%;
    }

    .solutions-carousel-tags .embla-button {
        position: absolute;
        inset-block-start: 50%;
        margin-block-start: -1.125rem;

        width: 2.125rem;
        height: 2.125rem;

        padding: 0;

        color: var(--Neutral-White);

        cursor: pointer;
        border-radius: 50%;
        overflow: hidden;

        border: 0.125rem solid currentColor;

        transition: border-color 200ms, background-color 200ms, color 200ms;
    }

    .solutions-carousel-tags .embla-button .embla-button__icon {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .solutions-carousel-tags .embla-button .embla-button__icon path {
        fill: currentColor;
    }

    .solutions-carousel-tags .embla-button * {
        pointer-events: none;
    }

    .solutions-carousel-tags .embla-button--prev {
        inset-inline-start: 0.75rem;
    }

    .solutions-carousel-tags .embla-button--next {
        inset-inline-end: 0.75rem;
    }

    .solutions-carousel__tags {
        margin-block-end: 1.5rem;
    }

    .solutions-carousel-tags-items {
        --slide-spacing: 2.5rem;
    }

    .solutions-carousel .c-button-collection {
        margin-block-start: 1.375rem;
    }
}

@media (min-width: 1440px) {
    .solutions-carousel-tags {
        max-width: 91.875rem;
        margin-inline: auto;
    }

    .solutions-carousel-tags .embla-button--prev {
        inset-inline-start: -1.875rem;
    }

    .solutions-carousel-tags .embla-button--next {
        inset-inline-end: -1.875rem;
    }

    .solutions-carousel-tags-items {
        --slide-spacing: 3.75rem;
    }

    .solution-image-desktop {
        max-width: 78.75rem;
    }
}

@media (max-width: 767.8px) {
    .b-solutions-carousel .c-description br {
        display: none !important;
    }

    .solutions-carousel-images .c-button {
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.0256rem;

        padding: 0.75rem 1rem;
    }
}