@layer componentes {
    .suggested-offers {
        margin: 32px 0;
    }

    .suggested-offers__title {
        margin-bottom: 16px;
    }

    .suggested-offers__title_fipe {
        font-weight: 400;
        font-size: 20px;
        line-height: 28px;
        color: #321D19;
    }

    .suggested-offers__container {
        display: flex;
        margin-bottom: var(--ids_spacing_4x);
        align-content: stretch;
        position: relative;
    }

    .loading-shimmer {
        color: #D6D0CC !important;
        background-color: #D6D0CC !important;
        /* adding gradients */
        -webkit-mask: linear-gradient(90deg, #000 25%, #0005, #000 75%) right/250% 100%;
        /* shimmer effect animation */
        animation: shimmer 1.5s infinite;
        background-repeat: no-repeat;
        min-height: 270px;
    }

    .loading-content {
        display: none;
    }

    @keyframes shimmer {
        100% {
            /* setting up mask position at left side */
            -webkit-mask-position: left
        }
    }

    .suggested-offers__swiper-controls__container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .suggested-offers__swiper-controls__container_fipe {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .more-offer-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        width: 100%;
        max-width: 153px;
        min-height: calc(270px - 24px);
        height: 100%;
        border-radius: 12px;
        background-color: var(--ids_color_action_primary_base);
        padding: 24px;
    }

    .suggested-offer-card {
        border: 1px solid #D6D0CC;
        border-radius: 12px;
        display: flex;
        height: auto;
        flex-direction: column;
    }

    .suggested-offer-card_fipe {
        border: 1px solid #D6D0CC;
        border-radius: 12px;
        display: flex;
        height: 230px;
        width: 187px;
        flex-direction: column;
        padding-bottom: 16px;
        gap: 12px;
    }

    .swiper-slide.suggested-offer-card {
        padding: 0 !important;
    }

    .suggested-offer-card__anchor {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .suggested-offer-card__container {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 12px 12px 16px 12px;
        justify-content: space-between;
    }

    .suggested-offer-card__container_fipe {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 12px 12px 16px 12px;
        justify-content: space-between;
        border-radius: 12px;
        background-color: transparent !important;
    }
    .suggested-offer-card__info-container {
        display: flex;
        flex-direction: column;
    }

    .suggested-offer-card__image {
        max-width: -webkit-fill-available;
        border-radius: 12px 12px 0 0;
    }

    .suggested-offer-card__separator {
        margin: 12px 0;
    }

    .suggested-offer-card__footer-container {
        display: flex;
        justify-content: space-between;
    }

    .suggested-offer-card__km {
        display: flex;
        justify-content: end;
    }

    /*Swiper modification*/
    #swiper-container.swiper-container {
        margin-bottom: var(--ids_spacing_12x);
    }

    .swiper-pagination {
        position: unset !important;
        display: flex;
        gap: var(--ids_spacing_1x);
    }

    .swiper-pagination-bullet {
        background: transparent !important;
        opacity: 1 !important;
        margin: 4px;
        width: 4px;
        height: 4px;
        border: var(--ids_size_border_small) solid var(--ids_color_action_neutral_base);
    }

    .swiper-pagination-bullet-active {
        background: var(--ids_color_action_neutral_variant) !important;
    }

    #super-offer__swiper-next-button.swiper-button-disabled,
    #super-offer__swiper-previous-button.swiper-button-disabled {
        color: var(--ids_color_action_disabled_base);
    }

    #super-offer__swiper-next-button.swiper-button-disabled:hover,
    #super-offer__swiper-previous-button.swiper-button-disabled:hover{
        color: var(--ids_color_action_disabled_base);
    }

    @media screen and (max-width: 1024px)  {
        .suggested-offers {
            padding: 0 32px;
        }
    }
}