.videos-section {
    display: flex;
    flex-direction: column;
    /*gap: 32px;*/
    width: 100%;
    padding: 0;
}

.videos-section__title {
    display: flex;
    gap: 24px;
    align-items: center;
    width: 100%;
    min-height: 48px;
}

.videos-section__title h2, .videos-section__title .h2 {
    flex: 1 1 auto;
}

.videos-section__button {
    height: 46px;
    color: #1f1f1f;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid #1f1f1f;
}

.videos-section__button:after  {
    display: block;
    content: '';
    background: no-repeat center center / cover url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.68359 11.3171L11.3503 4.65039' stroke='%231F1F1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M4.68359 4.65039H11.3503V11.3171' stroke='%231F1F1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
}

/*.videos-section__button:hover:after {
    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.68359 11.3171L11.3503 4.65039' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M4.68359 4.65039H11.3503V11.3171' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
}*/

.videos-section__featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 432px;
    gap: 32px;
    width: 100%;
}

.videos-section__side {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 32px;
    height: 600px;
}

.videos-section__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    width: 100%;
}

.video-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: hidden;
    color: #f6f2eb;
    border-radius: 12px;
}

.video-card--big {
    /*height: 600px;*/
    grid-column: 3 span;
    grid-row: 2 span;
    padding: 40px;
}

.video-card--big .video-card__shadow {
    top: auto;
    height: 221px;
}

.video-card--big .video-card__title {
    width: 100%;
    font-size: 40px;
    line-height: 1.3;
}

.video-card--big .video-card__play {
    width: 102px;
    height: 102px;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.15));
}

.video-card--small {
    height: 284px;
    padding: 20px;
}

.video-card--small:first-child .video-card__image {
    -o-object-position: center;
    object-position: center;
}

.video-card--small .video-card__shadow {
    top: auto;
    height: 109px;
}

.video-card__image {
    -o-object-fit: cover;
    object-fit: cover;
}

.video-card__shadow {
    pointer-events: none;
    -o-object-fit: cover;
    object-fit: cover;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.video-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
    transform: translate(-50%, -50%);
    background: center center/cover no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Ccircle cx='31.9999' cy='32.0002' r='18.6667' fill='%23F6F2EB'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.9999 3.3335C47.8212 3.3335 60.6666 16.1788 60.6666 32.0002C60.6666 47.8215 47.8212 60.6668 31.9999 60.6668C16.1786 60.6668 3.33325 47.8215 3.33325 32.0002C3.33325 16.1788 16.1786 3.3335 31.9999 3.3335ZM44.2106 30.1095L27.1839 20.8215C26.5173 20.4588 25.7066 20.4722 25.0533 20.8615C24.3999 21.2482 23.9999 21.9522 23.9999 22.7122V41.2882C23.9999 42.0482 24.3999 42.7522 25.0533 43.1388C25.7066 43.5282 26.5173 43.5415 27.1839 43.1788L44.2106 33.8908C44.9039 33.5122 45.3332 32.7868 45.3332 32.0002C45.3332 31.2135 44.9039 30.4882 44.2106 30.1095Z' fill='%23AC9A6D'/%3E%3C/svg%3E");
}

.video-card__play--big {
    width: 102px;
    height: 102px;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.15));
}

.video-card__title {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: #f6f2eb;
    /*text-overflow: ellipsis;*/

    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 1200px) {
    .videos-section {
        /*padding: 0 24px 56px;*/
    }

    .videos-section__featured {
        grid-template-columns: 1fr;
    }

    .videos-section__side, .videos-section__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        height: auto;
    }

    .video-card--big {
        height: 500px;
        grid-column: 2 span;
    }
}

@media (max-width: 768px) {
    .videos-section {
        /*gap: 24px;*/
        /*padding: 0 12px 44px;*/
    }

    .videos-section__title {
        flex-direction: column;
        align-items: flex-start;
    }

    .videos-section__title h2, .videos-section__title .h2 {
        font-size: 32px;
    }

    .videos-section__side, .videos-section__grid {
        /*grid-template-columns: 1fr;*/
        gap: 20px;
    }

    .video-card--big, .video-card--small {
        height: auto;
        min-height: auto;
        aspect-ratio: 16/10;
        padding: 20px;
        /*grid-column: auto;*/
        /*grid-row: auto;*/
    }

    .video-card--big .video-card__title {
        font-size: 26px;
    }

    .video-card__play--big {
        width: 78px;
        height: 78px;
    }
}

@media (max-width: 576px) {
    .videos-section__title {
        flex-direction: row;
    }

    .videos-section__grid {
        gap: 12px;
    }

    .videos-section__title h2, .videos-section__title .h2 {
        font-size: 22px !important;
    }

    .videos-section__button {
        white-space: nowrap;
    }

    .video-card__title {
        font-weight: 600;
        line-height: 1.1;
    }

    .video-card--big .video-card__title {
        font-size: 18px;
    }

    .video-card--small .video-card__title {
        font-size: 12px;
    }

    .video-card {
        padding: 12px;
    }

    .video-card--big .video-card__play {
        width: 54px;
        height: 54px;
    }

    .video-card__play {
        width: 24px;
        height: 24px;
    }
}