.contenedor_orientaciones
{
    width: 100%;
    position: relative;
    height: auto;
    display: grid;
    grid-template-columns: repeat(8,10vw);
    grid-template-rows: 10vw;
    column-gap: 10px;
    row-gap: 5px;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
}

.contenedor_orientaciones>a
{
    text-decoration: none;
}

.contenedor_orientaciones>a>article 
{
    width: 10vw;
    height: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    padding: 0 5px;
}

.contenedor_orientaciones>a:nth-child(1)>article
{
    /*background-color: #007bff;*/
    background-color: rgb(31,118,176);
}

.contenedor_orientaciones>a:nth-child(2)>article
{
    /*background-color: #28a745;*/
    background-color: rgb(165,193,42);
}

.contenedor_orientaciones>a:nth-child(3)>article
{
    /*background-color: #6f42c1;*/
    background-color: rgb(167, 152, 185);
}

.contenedor_orientaciones>a:nth-child(4)>article
{
    /*background-color: #ffc107;*/
    background-color: rgb(255, 203, 0);
}

.contenedor_orientaciones>a:nth-child(5)>article
{
    /*background-color: #dc3545;*/
    
    background-color: rgb(220, 13, 27);
}

.contenedor_orientaciones>a:nth-child(6)>article
{
    /*background-color: #fd7e14;*/
    
    background-color: rgb(241, 135, 0);
}

.contenedor_orientaciones>a:nth-child(7)>article
{
    /*background-color: #20c997;*/
    background-color: rgb(0, 151, 69);
    
}

.contenedor_orientaciones>a:nth-child(8)>article
{
    /*background-color: #17a2b8;*/
    background-color: rgb(0,159,227);
    
}

.contenedor_orientaciones>a>article>img
{
    width: 30%;
}

.contenedor_orientaciones>a>article:nth-child(1)>img 
{
    mask: grayscale(100%); /* Aplica escala de grises */
}

.contenedor_orientaciones>a>article::before
{
    content: "";
    position: absolute;
    top: 120%;
    left: 120%;
    transform: translate(-120%, -120%) rotate(25deg);
    width: 110%;
    height: 110%;
    background-size: cover;
    background-position: right; /* Ajusta la posición de recorte de la imagen */
    opacity: 0.3; /* Ajusta la opacidad según tus necesidades */
    z-index: 1;
    filter:blur(5px);
}

.contenedor_orientaciones>a:nth-child(1)>article:before
{
    background-image: url("../images/orientaciones_inicio/shopping-bag.png"); /* Ruta a tu imagen */
}

.contenedor_orientaciones>a:nth-child(2)>article:before
{
    background-image: url("../images/orientaciones_inicio/tractor.png"); /* Ruta a tu imagen */
}

.contenedor_orientaciones>a:nth-child(3)>article:before
{
    background-image: url("../images/orientaciones_inicio/ruler.png"); /* Ruta a tu imagen */
}

.contenedor_orientaciones>a:nth-child(4)>article:before
{
    background-image: url("../images/orientaciones_inicio/paint-board-and-brush.png"); /* Ruta a tu imagen */
}

.contenedor_orientaciones>a:nth-child(5)>article:before
{
    background-image: url("../images/orientaciones_inicio/megaphone.png"); /* Ruta a tu imagen */
}

.contenedor_orientaciones>a:nth-child(6)>article:before
{
    background-image: url("../images/orientaciones_inicio/customer.png"); /* Ruta a tu imagen */
}

.contenedor_orientaciones>a:nth-child(7)>article:before
{
    background-image: url("../images/Transformacin-curricular-4.jpeg"); /* Ruta a tu imagen */
}

.contenedor_orientaciones>a:nth-child(8)>article:before
{
    background-image: url("../images/orientaciones_inicio/computer.png"); /* Ruta a tu imagen */
}

.contenedor_orientaciones>a>article>h4
{
    font-family:'Montserrat', sans-serif;
    color: white;
    font-weight: 600;
    font-size: 0.6vw;
    text-align: center;
    margin-top: 20px;
}

@media (max-width:768px) and (orientation:portrait)
{
    .contenedor_orientaciones
    {
        grid-template-columns: repeat(4,22vw);
        grid-template-rows: 22vw 22vw;
        padding: 40px 0 0 0;
        z-index: 12;
        margin-top: 15px;
    }

    .contenedor_orientaciones>a>article
    {
        width: 22vw;
        height: 22vw;
    }

    .contenedor_orientaciones>a>article>h4 
    {
        font-size: 0.5rem;
    }

    .contenedor_orientaciones>a>article>img 
    {
        font-size: 50%;
    }
}