@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-Variable/Rubik-Variable.woff2') format('woff2');
    font-weight: 100 1000;
    font-optical-sizing: auto;
    font-stretch: 0% 200%;
    font-style: normal;
    font-display: swap;
}


/* ! топ предложений начало */

.top-specials__container-wrapper * {
    box-sizing: border-box;
}

.top-specials__container-wrapper {
    --top-specials__container--max-width: 1350px;

    --top-specials__item--bg-color: #ffffff;

    /* семейства шрифтов начало */
    --font-family-rubik: "Rubik";
    /* семейства шрифтов конец */

    /* цвета начало */

    /* цвета шрифтов начало */
    --font-color-black: #000000;
    --font-color-gray-3: #474747;
    --font-color-blue-4: #43aaff;
    --font-color-blue-5: #00b0ff;
    /* цвета шрифтов конец */


    /* цвета фонов начало */
    --background-color-white: #ffffff;
    /* цвета фонов конец */

    /* цвета конец */

    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
}

.top-specials__font-color-blue {
    color: var(--font-color-blue-4);
}

.top-specials__font-color-black {
    color: var(--font-color-black);
}

/* ! сеточный контейнер начало */

.top-specials__grid-container {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: var(--top-specials__container--max-width);
    width: 100%;
    display: grid;
    padding: 1rem;
    grid-column-gap: 1rem;
    grid-row-gap: 0;
    grid-auto-flow: dense;
    justify-content: stretch;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "top-specials__item-1__title top-specials__item-2__title top-specials__item-3__title"
        "top-specials__item-1__info top-specials__item-2__info top-specials__item-3__info"
        "top-specials__item-1__logo top-specials__item-2__logo top-specials__item-3__logo"
        "top-specials__item-4__title top-specials__item-5__title top-specials__item-6__title"
        "top-specials__item-4__info top-specials__item-5__info top-specials__item-6__info"
        "top-specials__item-4__logo top-specials__item-5__logo top-specials__item-6__logo";
}

.top-specials__cell {
    box-sizing: border-box;
    background-color: #ffffff;
    padding-top: 30px;
    padding-bottom: 30px;
    width: 100%;
    padding: 1rem 1rem 0 1rem;
    max-width: 380px;
    justify-self: center;
}

.top-specials__item-1__title {
    grid-area: top-specials__item-1__title;
}

.top-specials__item-1__info {
    grid-area: top-specials__item-1__info;
    padding-top: 1rem;
}

.top-specials__item-1__logo {
    grid-area: top-specials__item-1__logo;
    padding-top: 1rem;
    margin-bottom: 2rem;
}

.top-specials__item-2__title {
    grid-area: top-specials__item-2__title;
}

.top-specials__item-2__info {
    grid-area: top-specials__item-2__info;
    padding-top: 1rem;
}

.top-specials__item-2__logo {
    grid-area: top-specials__item-2__logo;
    padding-top: 1rem;
    margin-bottom: 2rem;
}

.top-specials__item-3__title {
    grid-area: top-specials__item-3__title;
}

.top-specials__item-3__info {
    grid-area: top-specials__item-3__info;
    padding-top: 1rem;
}

.top-specials__item-3__logo {
    grid-area: top-specials__item-3__logo;
    padding-top: 1rem;
    margin-bottom: 2rem;
}

.top-specials__item-4__title {
    grid-area: top-specials__item-4__title;
}

.top-specials__item-4__info {
    grid-area: top-specials__item-4__info;
    padding-top: 1rem;
}

.top-specials__item-4__logo {
    grid-area: top-specials__item-4__logo;
    padding-top: 1rem;
    margin-bottom: 2rem;
}

.top-specials__item-5__title {
    grid-area: top-specials__item-5__title;
}

.top-specials__item-5__info {
    grid-area: top-specials__item-5__info;
    padding-top: 1rem;
}

.top-specials__item-5__logo {
    grid-area: top-specials__item-5__logo;
    padding-top: 1rem;
    margin-bottom: 2rem;
}

.top-specials__item-6__title {
    grid-area: top-specials__item-6__title;
}

.top-specials__item-6__info {
    grid-area: top-specials__item-6__info;
    padding-top: 1rem;
}

.top-specials__item-6__logo {
    grid-area: top-specials__item-6__logo;
    padding-top: 1rem;
    margin-bottom: 2rem;
}


/* ! сеточный контейнер конец */

.top-specials__titles-container {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: var(--top-specials__container--max-width);
    width: 100%;
    padding: 1rem 1rem 0 2rem;
}

.top-specials__title {
    color: var(--font-color-blue-4);
    font-family: var(--font-family-rubik);
    font-size: 40px;
    font-weight: 500;
    line-height: 47px;
    letter-spacing: 0px;
    text-align: left;
    padding: 0;
    margin-bottom: 16px;
}

.top-specials__subtitle {
    color: var(--font-color-gray-3);
    font-family: var(--font-family-rubik);
    font-size: 30px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0px;
    text-align: left;
    padding: 0;
}

.top-specials__container {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: var(--top-specials__container--max-width);
    width: 100%;
    display: grid;
    padding: 1rem;
    grid-gap: 1rem;
    grid-auto-flow: dense;
    justify-content: stretch;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "top-specials__item1 top-specials__item2 top-specials__item3";
    background-color: #eee;
}

.top-specials__item {
    max-height: 470px;
    max-width: 430px;
    width: 100%;
    height: 470px;
    background-color: var(--top-specials__item--bg-color);
}

.top-specials__item-title {
    font-family: var(--font-family-rubik);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.25em;
    letter-spacing: 0px;
    text-align: left;
    padding: 0;
}

.top-specials__item-title--fs-24px {
    font-size: 24px;
}

.top-specials__item-info__row {
    display: flex;
    column-gap: 20px;
    margin-bottom: 15px;
    justify-content: space-between;
    align-items: center;
}

.top-specials__item-info {
    color: var(--font-color-gray-3);
    font-family: var(--font-family-rubik);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
    padding-top: 0;
}

.top-specials__item-info--greater {
    color: var(--font-color-gray-3);
    font-family: var(--font-family-rubik);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: right;
    padding-top: 0;
}

.top-specials__banner-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.top-specials__banner img {
    all: initial;
}

.top-specials__banner {
    text-align: center;
    transition: 0.5s all ease-out;
}

.top-specials__banner img {
    /* width: 80%; */
    width: 100%;
    height: auto;
    /* width: 315px; */
    /* height: 270px; */
    object-fit: contain !important;
}

.top-specials__button {
    display: block;
    position: absolute;
    bottom: 0;
    max-width: 144px;
    max-height: 39px;
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 4px 0 var(--font-color-blue-4);
    font-family: var(--font-family-rubik);
    color: var(--font-color-black);
    background-color: var(--background-color-white);
    font-size: 18px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0px;
    text-align: center;
    padding: 0;
    border-radius: 10px;
    outline: none;
    border: none;
    transition: 0.3s all ease-out;
    cursor: pointer;
    z-index: 100;
}

.top-specials__banner:hover {
    transform: scale(1.2);
}

.top-specials__button:hover {
    color: var(--font-color-blue-5);
}

.top-specials__button:hover~.top-specials__banner {
    transform: scale(1.2);
}

.top-specials__item1 {
    grid-area: top-specials__item1;
    justify-self: center;
}

.top-specials__item2 {
    grid-area: top-specials__item2;
    justify-self: center;
}

.top-specials__item3 {
    grid-area: top-specials__item3;
    justify-self: center;
}

/* ! топ предложений конец */

/* ! медиазапросы начало */
@media screen and (max-width: 1220px) {
    .top-specials__container {
        grid-auto-flow: dense;
        justify-content: stretch;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "top-specials__item1 top-specials__item2"
            "top-specials__item3 top-specials__item3";
    }

    .top-specials__grid-container {
        grid-auto-flow: dense;
        justify-content: stretch;

        /* grid-template-rows: repeat(9, 1fr); */
        grid-template-columns: repeat(2, 1fr);

        grid-template-areas:
            "top-specials__item-1__title top-specials__item-2__title"
            "top-specials__item-1__info top-specials__item-2__info"
            "top-specials__item-1__logo top-specials__item-2__logo"

            "top-specials__item-3__title top-specials__item-4__title"
            "top-specials__item-3__info top-specials__item-4__info"
            "top-specials__item-3__logo top-specials__item-4__logo"

            "top-specials__item-5__title top-specials__item-6__title"
            "top-specials__item-5__info top-specials__item-6__info"
            "top-specials__item-5__logo top-specials__item-6__logo";

    }

    .top-specials__item-1__logo {
        margin-bottom: 2rem;
    }

    .top-specials__item-2__logo {
        margin-bottom: 2rem;
    }

    .top-specials__item-3__logo {
        margin-bottom: 2rem;
    }

    .top-specials__item-4__logo {
        margin-bottom: 2rem;
    }

    .top-specials__item-5__logo {
        margin-bottom: 2rem;
    }

    .top-specials__item-6__logo {
        margin-bottom: 2rem;
    }
}

@media screen and (max-width: 1024px) {
    .top-specials__button:hover~.top-specials__banner {
        transform: scale(1.1);
    }

    .top-specials__banner:hover {
        transform: scale(1.1);
    }
}

@media screen and (max-width: 740px) {
    .top-specials__container {
        grid-auto-flow: dense;
        justify-content: center;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr;
        grid-template-areas:
            "top-specials__item1"
            "top-specials__item2"
            "top-specials__item3";
    }

    .top-specials__grid-container {
        grid-auto-flow: dense;
        justify-content: stretch;

        /* grid-row-gap: 0; */

        /* grid-template-rows: repeat(9, 1fr); */
        grid-template-columns: 1fr;

        grid-template-areas:
            "top-specials__item-1__title"
            "top-specials__item-1__info"
            "top-specials__item-1__logo"
            "top-specials__item-2__title"
            "top-specials__item-2__info"
            "top-specials__item-2__logo"
            "top-specials__item-3__title"
            "top-specials__item-3__info"
            "top-specials__item-3__logo"
            "top-specials__item-4__title"
            "top-specials__item-4__info"
            "top-specials__item-4__logo"
            "top-specials__item-5__title"
            "top-specials__item-5__info"
            "top-specials__item-5__logo"
            "top-specials__item-6__title"
            "top-specials__item-6__info"
            "top-specials__item-6__logo";

    }

    .top-specials__button:hover~.top-specials__banner {
        transform: scale(1.05);
    }

    .top-specials__banner:hover {
        transform: scale(1.05);
    }
}

@media screen and (max-width: 460px) {
    .top-specials__title {
        font-size: 30px;
    }

    .top-specials__subtitle {
        font-size: 20px;
    }
}

/* ! медиазапросы конец */