.medication-cards.section {
    padding-bottom: calc(var(--huge-space) * 2);
    overflow-x: visible;
    overflow-y: hidden;

    .container {
        overflow-x: visible;
    }
}

.brick_grid .medication-card-list {
    display: grid;
    grid-template-columns: 3fr 3fr 5fr 3fr 5fr;
    grid-auto-flow: column;
    gap: calc(var(--space-step) * 1.25);

    .card {
        padding: calc(var(--space-step) * 1.25);
        padding-right: var(--regular-space);
        background-color: var(--color-medication-card-bg);
        transition: all .3s ease;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;

        &:hover {
            background-color: rgba(236, 220, 187, 1);
        }

        a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;

            &>div:not(.arrow-icon) {
                display: flex;
                height: 100%;
            }
        }

        h4 {
            color: var(--color-main-dark);
            align-self: flex-start;
            font-family: 'Open Sans', sans-serif;
            font-size: var(--font-size-small-title);
            padding-bottom: var(--regular-space);
            padding-right: var(--regular-space);
        }

        img {
            max-width: 200px;
            width: 100%;
            max-height: 110px;
            height: auto;
            align-self: flex-end;
        }

        .arrow-icon svg path {
            fill: var(--color-main-dark);
        }
    }

    li:first-child {
        grid-column: 1;
    }

    li:nth-child(2) {
        grid-column: 2;
    }

    li:nth-child(3), li:nth-child(4) {
        grid-column: 3;
    }

    li:nth-child(5) {
        grid-column: 4;
    }

    li:nth-child(5),
    li:nth-child(2),
    li:first-child {
        grid-row: 1 / 3;

        a>div:not(.arrow-icon) {
            height: 100%;
            flex-direction: column;
            justify-content: space-between;
        }

        .arrow-icon {
            align-self: flex-end;
        }

        img {
            max-width: 230px;
            height: auto;
            max-height: 200px;
        }
    }

    @media screen and (max-width: 1229px) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);

        li:nth-child(5),
        li:nth-child(2),
        li:first-child {
            grid-row: auto;
            grid-column: auto;
        }

        li a>div:not(.arrow-icon) {
            height: 100%;
            flex-direction: column;
            justify-content: space-between;
        }

        .arrow-icon {
            align-self: flex-end;
            padding-bottom: 6px;
        }

        li a img {
            width: 100%;
            height: auto;
            max-height: 200px;
        }
    }

    @media screen and (max-width: 767px) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    @media screen and (max-width: 574px) {
        display: flex;
        gap: 0;
        
        li.card.swiper-slide {
            height: auto;
        }
    }
}

.gallery_grid.medication-card-list-wrapper {
    max-width: 990px;
    margin: 0 auto;
    overflow: visible;
}

.gallery_grid .medication-card-list .swiper-slide {
    height: auto !important;
}

.gallery_grid .medication-card-list {
    display: flex;
    align-items: stretch;
    gap: 20px;
    overflow: visible;

    .column {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .first-block.column {
        width: 67%;

        .card {
            flex: 0 0 calc(50% - 10px);

            &.items-4 {
                flex: 0 0 calc(100% / 3 - 40px / 3);
            }

            &:first-child, &.items-4:first-child {
                flex: 1 1 100%;
                padding-right: var(--large-space);
                min-height: 300px;

                h4 {
                    padding-bottom: 0;
                }
            }
        }

        .card:first-child img {
            max-height: none;
        }

        @media screen and (max-width: 499px) {
            .card.items-4 {
                flex: 0 0 calc(50% - 10px);
            }
        }
    }

    .second-block.column {
        width: 33%;
        flex-direction: column;
        height: 100%;

        img {
            max-width: 160px;
        }
    }

    /* .swiper-slide {
        height: auto !important;
    }     */

    .card {
        padding: calc(var(--space-step) * 1.25);
        background-color: var(--color-medication-card-bg);
        transition: all .3s ease;
        background-size: contain;
        background-position: bottom center;
        background-repeat: no-repeat;

        &:hover {
            background-color: rgba(194, 165, 123, 1);

            h4 {
                color: var(--color-white);
            }
        }

        a {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            height: 100%;
        }

        h4 {
            color: var(--color-main-dark);
            font-family: 'Open Sans', sans-serif;
            font-size: var(--font-size-small-title);
            padding-bottom: var(--small-space);
        }

        img {
            max-width: 200px;
            width: 100%;
            max-height: 160px;
            object-fit: contain;
            align-self: flex-end;
        }
    }

    @media screen and (max-width: 574px) {
        gap: 0;
        flex-wrap: nowrap;

        .first-block.column,
        .second-block.column {
            width: 100%;
            height: auto;

            .card {
                flex: 0 0 100%;

                &:first-child h4 {
                    padding-bottom: var(--small-space);
                }

                img {
                    max-width: 150px;
                }
            }
        }

        .second-block.column {
            flex-direction: row;
        }
    }
}

body.site_mode_women .brick_grid .medication-card-list {
    min-height: 316px;

    @media screen and (max-width: 574px) {
        min-height: 150px;
    }
}

body.site_mode_women .gallery_grid .medication-card-list {
    .first-block.column .card {
        min-height: 240px;

        &:first-child {
            min-height: 368px;
        }
    }

    .second-block.column .card {
        min-height: 196px;
    }

    @media screen and (max-width: 979px) {
        .first-block.column .card {
            min-height: 185px;

            &:first-child {
                min-height: 285px;
            }
        }

        .second-block.column .card {
            min-height: 150px;
        }
    }
}