#lektori {
    padding-bottom: 5em;
    background-color: #efefef;
}

#lektori h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 55px;
    margin: 50px 0 25px 0;
}

#lektori>div>div.block>h3 {
    margin-bottom: 4rem;
}

#lektori .block1 {
    padding-bottom: 2em;
}

#lektori .block1 .block{
    padding-top: 5em;
}

#lektori .cards {
    grid-gap: 35px;
}

#lektori .cards .card {
    padding-top: 3em;
}

#lektori .card .footer .media-btn {
    display: none;
}

#lektori .card .footer .button4 {
    margin-top: 32px;
}

.swiper-lecturers {
    width: max-content;
    max-width: 100%;
}

.swiper-lecturers .swiper-wrapper {
    width: auto;
}

.swiper-lecturers .swiper-slide {
    width: auto;
    height: auto;
}

.swiper-lecturers-mobile {
    display: none;
}

@media only screen and (max-width: 1245px) {
    #lektori .cards {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    #lektori .card .content1 {
        padding: 1rem 1.5rem 0rem 1.5rem;
    }

    .card .footer {
        padding: 0rem 2.5rem 2rem 2.5rem;
    }
}

@media only screen and (max-width: 1000px) {
    #lektori .card .footer button {
        display: none;
    }

    #lektori .card .footer {
        margin-top: 20px;
        width: fit-content;
        gap: 20px;
        padding: 1rem 0 2rem 0;
        justify-self: center;
    }

    #lektori .card .footer .media-btn {
        display: flex;
    }

    #lektori .card .content1 {
        padding: 1rem 2.5rem 0rem 2.5rem;
    }

    #lektori .card .footer .button4 {
        margin-top: 60px;
    }

    .card .content1 .description-container {
        display: block;
    }

    .card h2 {
        font-size: 24px;
    }

    .card.card-on-mobile {
        display: grid;
    }

    .card .footer {
        padding: 0rem 2.5rem 2rem 2.5rem;
    }
}

@media only screen and (max-width: 600px) {
    #lektori,
    #lektori .block1 {
        padding: 0;
    }

    #lektori .block1 .block h3 {
        font-family: "Roboto", sans-serif;
        font-size: clamp(8px, 4.5vw, 18px);
        font-weight: 300;
        color: #161616;
        line-height: 1.4;
        margin-right: 2.5vw;
        margin-top: 5.5vw;
        margin-bottom: 5.5vw;
        text-align: left;
    }

    #lektori .block1 .block h2 {
        text-align: left;
        padding-top: 0;
        font-size: clamp(12px, 8.5vw, 36px);
        margin-bottom: 0;
        margin-top: 40px;
    }

    #lektori .block1 .block {
        padding-top: clamp(2em, 10vw, 3em);
    }

    #lektori .cards .card {
        padding-top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #lektori .card .content1 {
        padding: 3vw 7.2vw 6vw 7.2vw;
    }

    #lektori .cards {
        grid-gap: unset;
    }

    #lektori .card .footer {
        padding: 0 0 10vw;
        gap: 4.5vw;
    }

    .card .content {
        padding: 36px 8vw 0;
    }

    .swiper-lecturers {
        display: none;
    }

    .swiper-lecturers-mobile {
        display: block;
        width: 95%;
        padding-bottom: 22vw;
        padding-left: 30px;
        height: 148vw;
    }

    .swiper-lecturers-mobile .swiper-slide {
        flex-shrink: 0;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 20px;
        box-sizing: border-box;
    }

    .swiper-lecturers-mobile .swiper-wrapper {
        width: 100% !important;
        grid-gap: unset;
        padding: 0;
        display: flex;
        box-sizing: content-box;
    }

    .swiper-lecturers-mobile img.center {
        /* width: 22.5vw; */
        width: 27vw;
    }

    .swiper-lecturers-mobile .more img.center {
        width: 22.5vw;
    }

    .swiper-lecturers-mobile .cards {
        margin: 0;
    }

    .swiper-lecturers-mobile .card {
        box-shadow: none;
    }

    .swiper-lecturers-mobile .card .content1 h4 {
        font-weight: 300;
        font-size: 7.2vw;
    }

    .swiper-lecturers-mobile .card.more .content1 h4 {
        font-size: 6vw;
    }

    .swiper-lecturers-mobile .card .content1 .sub-title {
        font-size: 5vw;
        color: black;
    }

    .swiper-lecturers-mobile .card.more .content1 .sub-title {
        font-size: 4vw;
    }

    .swiper-lecturers-mobile .card .content1 .description-container {
        margin: 0;
        list-style-type: none;
        font-size: 3.5vw;
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 300;
        color: black;
        line-height: 1.2;
        height: 0;
    }

    .swiper-lecturers-mobile .card.more .content1 .description-container {
        margin: 10vw 0 0 0;
        height: auto
    }

    .swiper-lecturers-mobile .card .footer .media-btn {
        width: 11vw;
        height: 11vw;
    }

    .swiper-lecturers-mobile .card .footer .media-btn img {
        height: 5.5vw;
    }

    .swiper-lecturers-mobile .card .content1 .description-container li:not(:first-child) {
        margin-top: 4.5vw;
    }

    .swiper-lecturers-mobile .swiper-pagination {
        bottom: 11vw;
        --swiper-pagination-bullet-inactive-color: #fff;
        --swiper-pagination-bullet-inactive-opacity: 1;
        --swiper-theme-color: #000;
    }

    .swiper-lecturers-mobile .swiper-pagination-bullet {
    --swiper-pagination-bullet-width: 2.7vw;
    --swiper-pagination-bullet-height: 2.7vw;
    --swiper-pagination-bullet-horizontal-gap: 1.5vw;
    }

    .swiper-lecturers-mobile .shrink-ul-btn {
        position: absolute;
        top: 5vw;
        left: 7vw;
        cursor: pointer;
        display: none;
    }

    .swiper-lecturers-mobile .more .shrink-ul-btn {
        display: block;
    }

    .swiper-lecturers-mobile .shrink-ul-btn:after {
        font-family: swiper-icons;
        font-size: 4.5vw;
        content: 'prev';
    }

    .swiper-lecturers-mobile .card {
        position: relative;
        overflow: hidden;
    }

    .swiper-lecturers-mobile .main-img {
        display: block;
        margin: 0 auto;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
        position: relative;
        border: 1vw solid white;
        margin-top: 61.5vw;
    }

    .swiper-lecturers-mobile .card.more .main-img {
        margin-top: 8.5vw;
    }

    .swiper-lecturers-mobile .placeholder-img {
        display: block;
        width: 100%;
        object-fit: cover;
        transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: -1;
        margin: 0 auto;
        position: relative;
        opacity: 0;
        transition: opacity 3s;
    }

    .swiper-lecturers-mobile .placeholder-img:not(:first-child) {
        position: absolute;
        top: 0;
        left: 0;
    }

    .swiper-lecturers-mobile .placeholder-img.active {
        opacity: 1;
    }

    .swiper-lecturers-mobile .card.more .placeholder-img {
        height: 0
    }

    .swiper-lecturers-mobile .description-container {
        overflow: hidden;
        height: auto;
    }

    .swiper-lecturers-mobile .description-container.shrunk {
        height: 0;
        padding: 0;
        margin: 0;
    }

    #lektori .swiper-lecturers-mobile .card.more .footer {
        display: flex;
        margin-top: auto;
    }

    #lektori .swiper-lecturers-mobile .card .footer {
        height: 0;
        height: auto;
        display: none;
    }



    .swiper-lecturers-mobile .swiper-slide .button-container {
        position: absolute;
        bottom: 25vw;
        width: 100%;
        display: flex;
        justify-content: center;
        z-index: 10;
    }

    .swiper-lecturers-mobile .swiper-slide .button-more {
        background-color: #000;
        margin-top: 1.5vw;
        margin-bottom: 8px;
        transition-duration: 0.3s;
        box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.1);
        position: absolute;
        display: block;
        border-radius: 6.5vw;
        width: 75%;
        height: 13vw;
        color: #f5f5f5;
        font-size: 3.2vw;
    }

    .swiper-lecturers-mobile .card.more .button-container {
        display: none;
    }
}

@media only screen and (max-width: 500px) {
    .swiper-lecturers-mobile {
        padding-left: 25px;
    }
}

@media only screen and (max-width: 400px) {
    .swiper-lecturers-mobile {
        padding-left: 20px;
    }
}