@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..400&display=swap');

body {font-family: "Inter", sans-serif}

.section-slider {
    height: 55vh;
    & .swiper-slide {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        &::before {
            background-color:rgba(0, 0, 0, .5);
        }
    }
    & .swiper-list-disc {
        fill: var(--index-color);
    }
}

@media (min-width: 1024px) {
    .section-slider {height: 40vh;min-height: 300px}
}

.section-catalog .products-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 4px;
    & .product-block {
        position: relative;
        background: white;
        width: calc(50% - 10px);
        padding: 16px;
        height: 180px;
        transition: .3s;
        &:has(.additional-contacts.\!flex) {margin-bottom: 40px;transition: .3s}
    }
    & .product-name {
        font-size: 20px;
    }
    & .product-image {
        position: absolute;
        bottom: 5px;
        right: 5px;
        width: 130px;
        height: 130px;
    }
    & .additional-contacts {
        border-top: 1px solid #c6c6c6;
        & a {
            border-right: 1px solid #c6c6c6;
            &:last-child {border-right: 0}
        }
        transition: .3s;
        &.\!flex {bottom: -20%; transition: .3s}
    }
}

.section-contacts {
    & button.submit-contact-form {
        background: var(--index-color);
    }
}