.contenedor-plantel {
    width: 60%
}

.platel-titulo-directorio {
    font-family: Gotham-Black;
    color: #BFBFBF;
    width: 100%;
    text-align: center;
}

.platel-titulo-plantel {
    font-family: Gotham-Black;
    color: #BFBFBF;
    width: 100%;
    text-align: center;
}

.tag-list {
    margin: 0;
    padding-inline: 0;
    list-style: none;
}

.scroller {
    max-width: 1200px;
}

.scroller__inner {
    display: flex;
    padding-block: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 90%, transparent);
    mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}

    .scroller[data-animated="true"] .scroller__inner {
        width: max-content;
        flex-wrap: nowrap;
        animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
        animation-delay: 1s;
    }

.scroller[data-direction='left'] {
    --_animation-direction: forwards;
}

.scroller[data-direction='right'] {
    --_animation-direction: reverse;
}

.scroller[data-direction='slow'] {
    --_animation-duration: 180s;
}

.scroller[data-speed='fast'] {
    --_animation-duration: 80s;
}

.scroller[data-speed='slow'] {
    --_animation-duration: 100s;
}


@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}

img {
    max-height: 500px;
    max-width: 250px;
    border-radius: 10px;
    object-fit: cover;
    transition: 300ms;
    filter: grayscale(.2);
    cursor: pointer;
}

.scroller[data-animated="true"] .scroller__inner:has(img:hover, img:active, img:focus) {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

img:hover, img:focus, img:active {
    transform: scale(1.1);
    filter: saturate(1.5);
}

.scroller[data-animated="true"] .scroller__inner:has(li:hover, li:active, li:focus) {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

li:hover, li:focus, li:active {

}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}



@media only screen and (min-width: 1857px) {
    .contenedor-plantel {
        width: 80%
    }

    .platel-titulo-directorio {
        font-size: 3.75rem;
        text-align: start !important;
        padding-left: 3rem
    }

    .platel-titulo-plantel {
        font-size: 3.75rem;
        text-align: end;
        padding-right: 3rem
    }

    .tag-list {
        margin: 0;
        padding-inline: 0;
        list-style: none;
    }

    .scroller {
        max-width: 100%;
    }

    .scroller__inner {
        display: flex;
        padding-block: 0.5rem;
        flex-wrap: wrap;
        gap: 0.1rem;
    }


    img {
        max-height: 500px;
        max-width: 350px;
        border-radius: 10px;
        object-fit: cover;
        transition: 300ms;
        filter: grayscale(.2);
        cursor: pointer;
    }
}

@media only screen and (min-width: 1681.01px)and (max-width: 1856px) {
    .contenedor-plantel {
        width: 80%
    }

    .platel-titulo-directorio {
        font-size: 3.75rem;
        text-align: start !important;
        padding-left: 3rem
    }

    .platel-titulo-plantel {
        font-size: 3.75rem;
        text-align: end;
        padding-right: 3rem
    }

    .tag-list {
        margin: 0;
        padding-inline: 0;
        list-style: none;
    }

    .scroller {
        max-width: 100%;
    }

    .scroller__inner {
        display: flex;
        padding-block: 0.5rem;
        flex-wrap: wrap;
        gap: 0.1rem;
    }


    img {
        max-height: 500px;
        max-width: 350px;
        border-radius: 10px;
        object-fit: cover;
        transition: 300ms;
        filter: grayscale(.2);
        cursor: pointer;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1680px) {
    .contenedor-plantel {
        width: 80%
    }

    .platel-titulo-directorio {
        font-size: 3.75rem;
        text-align: start !important;
        padding-left: 3rem
    }

    .platel-titulo-plantel {
        font-size: 3.75rem;
        text-align: end;
        padding-right: 3rem
    }

    .tag-list {
        margin: 0;
        padding-inline: 0;
        list-style: none;
    }

    .scroller {
        max-width: 100%;
    }

    .scroller__inner {
        display: flex;
        padding-block: 0.5rem;
        flex-wrap: wrap;
        gap: 0.1rem;
    }


    img {
        max-height: 500px;
        max-width: 350px;
        border-radius: 10px;
        object-fit: cover;
        transition: 300ms;
        filter: grayscale(.2);
        cursor: pointer;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .contenedor-plantel {
        width: 80%
    }

    .platel-titulo-directorio {
        font-size: 3.75rem;
        text-align: start !important;
        padding-left: 3rem
    }

    .platel-titulo-plantel {
        font-size: 3.75rem;
        text-align: end;
        padding-right: 3rem
    }

    .tag-list {
        margin: 0;
        padding-inline: 0;
        list-style: none;
    }

    .scroller {
        max-width: 100%;
    }

    .scroller__inner {
        display: flex;
        padding-block: 0.5rem;
        flex-wrap: wrap;
        gap: 0.1rem;
    }


    img {
        max-height: 500px;
        max-width: 350px;
        border-radius: 10px;
        object-fit: cover;
        transition: 300ms;
        filter: grayscale(.2);
        cursor: pointer;
    }
}


@media all and (min-width: 768px) and (max-width: 991px) {
    .contenedor-plantel {
        width: 80%
    }

    .platel-titulo-directorio {
        font-size: 3.75rem;
        text-align: start !important;
        padding-left: 3rem
    }

    .platel-titulo-plantel {
        font-size: 3.75rem;
        text-align: end;
        padding-right: 3rem
    }

    .tag-list {
        margin: 0;
        padding-inline: 0;
        list-style: none;
    }

    .scroller {
        max-width: 100%;
    }

    .scroller__inner {
        display: flex;
        padding-block: 0.5rem;
        flex-wrap: wrap;
        gap: 0.1rem;
    }


    img {
        max-height: 500px;
        max-width: 350px;
        border-radius: 10px;
        object-fit: cover;
        transition: 300ms;
        filter: grayscale(.2);
        cursor: pointer;
    }
}


@media all and (min-width: 576px) and (max-width: 767px) {
    .contenedor-plantel {
        width: 90%
    }

    .platel-titulo-directorio {
        font-size: 1.563rem;
        text-align: center;
    }

    .platel-titulo-plantel {
        font-size: 1.563rem;
        text-align: center;
    }

    .tag-list {
        margin: 0;
        padding-inline: 0;
        list-style: none;
    }

    .scroller {
        max-width: 600px;
    }

    .scroller__inner {
        display: flex;
        padding-block: 0.5rem;
        flex-wrap: wrap;
        gap: 0.1rem;
    }

    img {
        max-height: 200px;
        max-width: 200px;
        border-radius: 10px;
        object-fit: cover;
        transition: 300ms;
        filter: grayscale(.2);
        cursor: pointer;
    }
}


@media all and (min-width: 360px) and (max-width: 575px) {
    .contenedor-plantel {
        width: 90%
    }

    .platel-titulo-directorio {
        font-size: 1.563rem;
        text-align: center;
    }

    .platel-titulo-plantel {
        font-size: 1.563rem;
        text-align: center;
    }

    .tag-list {
        margin: 0;
        padding-inline: 0;
        list-style: none;
    }

    .scroller {
        max-width: 600px;
    }

    .scroller__inner {
        display: flex;
        padding-block: 0.5rem;
        flex-wrap: wrap;
        gap: 0.1rem;
    }

    img {
        max-height: 200px;
        max-width: 200px;
        border-radius: 10px;
        object-fit: cover;
        transition: 300ms;
        filter: grayscale(.2);
        cursor: pointer;
    }
}