.tpl-grid-1video-2img-2text__title-section {
    margin-bottom: 0;
}

    .tpl-grid-1video-2img-2text {
    display: grid;
    grid-template-columns: auto;
    row-gap: 16px;
}

.tpl-grid-1video-2img-2text > div {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

.tpl-grid-1video-2img-2text__img {
    width: 100%;
    height: 130px;
    border-radius: 16px;
    overflow: hidden;
}

.tpl-grid-1video-2img-2text__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tpl-grid-1video-2img-2text__img.img-1 {
    margin-top: calc(32px - 16px);
    width: 100%;
    height: 130px;
}

.tpl-grid-1video-2img-2text__video {
    width: 100%;
    height: auto;
}

.tpl-grid-1video-2img-2text__img.img-2 {
    width: 100%;
    height: 192px;
}

.tpl-grid-1video-2img-2text__img.img-2.desktop {
    display: none;
}

.tpl-grid-1video-2img-2text__description {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    padding: 16px 16px 24px 16px;
    border-radius: 16px;
    background-color: var(--color-terciary-gray, #F8F7F5);
}

/* Video */
.tpl-grid-1video-2img-2text__video {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
}

.tpl-grid-1video-2img-2text__wrapper-video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 1/1;
    overflow: hidden;
}

.tpl-grid-1video-2img-2text__wrapper-video.video-ready {
    background: linear-gradient(58deg, rgba(0, 0, 0, 0.52) 19.3%, rgba(0, 0, 0, 0.00) 50.24%), lightgray 50% / cover no-repeat;
}

.tpl-grid-1video-2img-2text__wrapper-video.video-loading {
    position: relative;
    background: #eee;
    background: linear-gradient(to right, #e2e2e2 8%, #e7e7e7 18%, #e2e2e2 33%);
    background-size: 800px 335px;
    animation: loadingShimmer 1.2s ease-in-out infinite forwards;
}

.tpl-grid-1video-2img-2text__overlay-video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0);
    pointer-events: all;
}

.tpl-grid-1video-2img-2text__btn-video {
    position: absolute;
    z-index: 500;
    right: 16px;
    bottom: 16px;
    display: none;
    text-align: center;
    cursor: pointer;
}

.tpl-grid-1video-2img-2text__btn-video svg {
    width: 48px;
    height: 48px;
}

.tpl-grid-1video-2img-2text__btn-video.pauseBtn {
    display: block;
}

@media (min-width: 728px) {
    .tpl-grid-1video-2img-2text {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px
    }

    .tpl-grid-1video-2img-2text > div {
        gap: 20px;
    }

    .tpl-grid-1video-2img-2text__title-section {
        align-self: start;
        padding-block: 32px;
    }

    .tpl-grid-1video-2img-2text__wrapper-video {
        height: auto;
    }

    .tpl-grid-1video-2img-2text__description {
        align-self: start;
        max-height: max-content;
    }

    .tpl-grid-1video-2img-2text__img {
        height: 200px;
        align-self: flex-start;
    }

    .tpl-grid-1video-2img-2text__img.img-1{
        margin-top: 0;
    }

    .tpl-grid-1video-2img-2text__img.img-2.mobile {
        display: none;
    }

    .tpl-grid-1video-2img-2text__img.img-2.desktop {
        display: block;
    }

    /* Video */
    .tpl-grid-1video-2img-2text__video video {
        aspect-ratio: 1/1;
    }
}

@media (min-width: 1024px) {
    .tpl-grid-1video-2img-2text__description {
        row-gap: 8px;
        padding: 32px 32px 48px 32px;
    }

    .tpl-grid-1video-2img-2text__img.img-1,
    .tpl-grid-1video-2img-2text__img.img-2 {
        height: 256px;
    }

    /* Video */
    .tpl-grid-1video-2img-2text__video {
        border-radius: 32px;
    }

    .tpl-grid-1video-2img-2text__btn-video {
        right: 32px;
        bottom: 32px;
    }

    .tpl-grid-1video-2img-2text__btn-video svg {
        width: 78px;
        height: 78px;
    }
}

@media (min-width: 1440px) {
    .tpl-grid-1video-2img-2text,
    .tpl-grid-1video-2img-2text > div {
        gap: 32px;
    }
}

@keyframes loadingShimmer {
    0% {
        background-position: -250px 0;
    }

    100% {
        background-position: 550px 0;
    }
}