.gd-videos {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    position: relative;

    overflow: hidden;
}


.gd-videos__wrapper {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    position: relative;

    overflow: hidden;
}


.gd-videos__track {
    display: flex;
    align-items: flex-start;

    gap: 1rem;

    width: 0;
    min-width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    scrollbar-width: none;

    padding:
        0.25rem
        9%
        0.75rem;

    box-sizing: border-box;
}


.gd-videos__track::-webkit-scrollbar {
    display: none;
}


.gd-videos__item {
    flex: 0 0 82%;

    width: 82%;
    min-width: 0;
    max-width: 82%;

    scroll-snap-align: center;
    scroll-snap-stop: always;

    background-color: #fff;

    border: 1px solid rgba(138, 98, 72, 0.12);
    border-radius: 1.25rem;

    overflow: hidden;

    box-shadow:
        0 0.25rem 1rem
        rgba(79, 55, 42, 0.08);

    box-sizing: border-box;
}


.gd-videos__player {
    width: 100%;

    aspect-ratio: 9 / 16;

    overflow: hidden;

    background-color: #f5f5f5;
}


.gd-videos__player iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


.gd-videos__content {
    width: 100%;

    padding: 1rem 1rem 1.1rem;

    box-sizing: border-box;
}


.gd-videos__links-title {
    margin: 0 0 0.7rem;

    font-size: 0.95rem;
    font-weight: 600;

    line-height: 1.35;

    color: #5f4637;
}


.gd-videos__links {
    display: flex;
    flex-wrap: wrap;

    gap: 0.5rem;
}


.gd-videos__link {
    display: inline-flex;
    align-items: center;

    width: fit-content;
    max-width: 100%;

    padding: 0.48rem 0.8rem;

    border: 1px solid rgba(138, 98, 72, 0.28);
    border-radius: 50rem;

    background-color: #FDF7EF;

    color: #8A6248;

    font-size: 0.88rem;
    font-weight: 500;

    line-height: 1.25;

    text-decoration: none;

    overflow-wrap: anywhere;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.gd-videos__link:hover,
.gd-videos__link:focus-visible {
    background-color: #8A6248;

    border-color: #8A6248;

    color: #FDF7EF;

    transform: translateY(-1px);
}


.gd-videos__link:focus-visible {
    outline: 2px solid #EF9E56;
    outline-offset: 2px;
}


.gd-videos__button {
    display: none;
}


.gd-videos__indicators {
    display: flex;
    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 0.55rem;

    margin-top: 0.8rem;
    margin-bottom: 0.3rem;
}


.gd-videos__indicator {
    width: 0.55rem;
    height: 0.55rem;

    flex: 0 0 auto;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background-color: rgba(138, 98, 72, 0.25);

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.gd-videos__indicator.is-active {
    background-color: #8A6248;

    transform: scale(1.18);
}
.gd-videos__player {
    position: relative;
}


.gd-videos__fullscreen {
    position: absolute;

    top: 0.75rem;
    right: 0.75rem;

    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.5rem;
    height: 2.5rem;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;

    background-color: rgba(0, 0, 0, 0.48);

    color: #fff;

    font-size: 1.05rem;

    cursor: pointer;

    backdrop-filter: blur(4px);

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.gd-videos__fullscreen:hover,
.gd-videos__fullscreen:focus-visible {
    background-color: rgba(0, 0, 0, 0.7);

    transform: scale(1.06);
}


.gd-videos__fullscreen:focus-visible {
    outline: 2px solid #EF9E56;
    outline-offset: 2px;
}


.gd-videos__player:fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    aspect-ratio: auto;

    background-color: #000;
}


.gd-videos__player:fullscreen iframe {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.gd-videos__player:fullscreen .gd-videos__fullscreen {
    top: 1rem;
    right: 1rem;
}



/* Desde escritorio */
@media (min-width: 992px) {

    .gd-videos__track {
        gap: 1.25rem;

        padding-left: 0;
        padding-right: 0;

        scroll-padding-inline: 0;
    }


    .gd-videos__item {
        flex:
            0
            0
            calc((100% - 2.5rem) / 3);

        width:
            calc((100% - 2.5rem) / 3);

        max-width:
            calc((100% - 2.5rem) / 3);

        scroll-snap-align: start;
    }


    .gd-videos[data-gd-videos-count="1"]
    .gd-videos__track {
        justify-content: center;
    }


    .gd-videos[data-gd-videos-count="1"]
    .gd-videos__item {
        flex-basis: 31%;

        width: 31%;
        max-width: 31%;
    }


    .gd-videos[data-gd-videos-count="2"]
    .gd-videos__track {
        justify-content: center;
    }


    .gd-videos[data-gd-videos-count="2"]
    .gd-videos__item {
        flex-basis:
            calc((66% - 1.25rem) / 2);

        width:
            calc((66% - 1.25rem) / 2);

        max-width:
            calc((66% - 1.25rem) / 2);
    }


    .gd-videos__button {
        position: absolute;

        top: 37%;

        z-index: 5;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 2.6rem;
        height: 2.6rem;

        padding: 0;

        border: 1px solid rgba(138, 98, 72, 0.18);
        border-radius: 50%;

        background-color: rgba(255, 255, 255, 0.94);

        color: #8A6248;

        box-shadow:
            0 0.2rem 0.8rem
            rgba(79, 55, 42, 0.12);

        transition:
            background-color 0.2s ease,
            color 0.2s ease,
            transform 0.2s ease;
    }


    .gd-videos__button--prev {
        left: 0.5rem;

        transform: translateY(-50%);
    }


    .gd-videos__button--next {
        right: 0.5rem;

        transform: translateY(-50%);
    }


    .gd-videos__button:hover {
        background-color: #8A6248;

        color: #fff;
    }


    .gd-videos__button--prev:hover,
    .gd-videos__button--next:hover {
        transform:
            translateY(-50%)
            scale(1.05);
    }

}



/* Escritorios grandes */
@media (min-width: 1400px) {

    .gd-videos {
        max-width: 1320px;

        margin-left: auto;
        margin-right: auto;
    }

}



/* Pantallas muy grandes */
@media (min-width: 1800px) {

    .gd-videos {
        max-width: 1440px;
    }

}