.grids {
    display: block;
    font-family: var(--fontFamily1);
    font-size: 1em;
    margin-top: 2em;
    margin-bottom: 8em;
    width:100%;
    background: url('../media/images/fondo-quatuor-1.png') top right no-repeat;
}
    .grids > h2 {
        display: block;
        text-align: left;
        font-size: 3em;
        font-family: var(--fontFamily2);
        max-width: var(--max-width);
        width: calc(100% - 2em);
        margin: 1em auto;
    }
    .grids > div {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(6, 8em);
        grid-column-gap: 1px;
        grid-row-gap: 1px;
        max-width: 100%;
        font-family: var(--fontFamily1);
        font-size: 1em;
        max-width: var(--max-width);
        width: calc(100% - 2em);
        margin: 1em auto;
    }

    .grids > div > * {
        color: white;
        padding: 1.5em;
        font-size: 1.2em;
        line-height: 1.2em;
        vertical-align: bottom;
        text-align: left;
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        text-decoration: none;
        position: relative;
        background-size: 100%;
        background-position: center center;
        transition: background-size 0.4s ease-in;
    }

        .grids > div > *::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: #222E59;
            mix-blend-mode: lighten;
            bottom: 0;
            left: 0;
            z-index: 1;
            opacity: 1;
        }

        .grids > div > *::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 50%;
            background: linear-gradient(transparent,black);
            bottom: 0;
            left: 0;
            z-index: 2;
            opacity: 0.5;
        }

        .grids > div > *:hover {
            background-size: 105%;
        }

        .grids > div > * > * {
            display: block;
            text-align: left;
            margin: 0.2em 0;
            z-index: 2;
        }

            .grids > div > * > *:last-child {
                margin: 0.2em 0 0 0;
            }

        .grids > div > * > h5 {
            font-size: 1.2em;
            font-weight: lighter;
        }

            .grids > div > * > h5 > strong {
                font-weight: bold;
            }

        .grids > div > * > p {
            font-size: 1em;
            font-weight: lighter;
        }

        .grids > div > * > div.icon {
            font-size: 1em;
            color: white;
            display: inline-block;
            width: auto;
        }

            .grids > div > * > div.icon::before {
                content: '';
                display: inline-block;
                width: 1.4em;
                height: 1.4em;
                background-size: cover;
                -webkit-mask-image: url('../media/icons/navigate.svg');
                mask-image: url('../media/icons/navigate.svg');
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                -webkit-mask-size: cover;
                mask-size: cover;
                margin-right: 0.3em;
                vertical-align: bottom;
                background-color: white;
            }

    .grids > div > :hover > div.icon {
        color: var(--linkColor);
    }

        .grids > div > :hover > div.icon::before {
            background-color: var(--linkColor);
        }

    .grids > div > :nth-child(1) {
        grid-area: 1 / 1 / 4 / 3;
    }

    .grids > div > :nth-child(2) {
        grid-area: 1 / 3 / 4 / 4;
    }

    .grids > div > :nth-child(3) {
        grid-area: 1 / 4 / 4 / 5;
    }

    .grids > div > :nth-child(4) {
        grid-area: 4 / 1 / 6 / 2;
    }

    .grids > div > :nth-child(5) {
        grid-area: 4 / 2 / 6 / 3;
    }

    .grids > div > :nth-child(6) {
        grid-area: 4 / 3 / 6 / 4;
    }

    .grids > div > :nth-child(7) {
        grid-area: 4 / 4 / 6 / 5;
    }

    .grids > div > :nth-child(8) {
        grid-area: 6 / 1 / 7 / 2;
    }

    .grids > div > :nth-child(9) {
        grid-area: 6 / 2 / 7 / 3;
    }

    .grids > div > :nth-child(10) {
        grid-area: 6 / 3 / 7 / 4;
    }

    .grids > div > :nth-child(11) {
        grid-area: 6 / 4 / 7 / 5;
    }

@media (max-width: 1175px) {

    .grids > div {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(22, 6em);
    }

        .grids > div > :nth-child(1) {
            grid-area: 1 / 1 / 4 / 2;
        }

        .grids > div > :nth-child(2) {
            grid-area: 4 / 1 / 7 / 2;
        }

        .grids > div > :nth-child(3) {
            grid-area: 7 / 1 / 10 / 2;
        }

        .grids > div > :nth-child(4) {
            grid-area: 10 / 1 / 12 / 2;
        }

        .grids > div > :nth-child(5) {
            grid-area: 12 / 1 / 14 / 2;
        }

        .grids > div > :nth-child(6) {
            grid-area: 14 / 1 / 16 / 2;
        }

        .grids > div > :nth-child(7) {
            grid-area: 16 / 1 / 18 / 2;
        }

        .grids > div > :nth-child(8) {
            grid-area: 18 / 1 / 19 / 2;
        }

        .grids > div > :nth-child(9) {
            grid-area: 19 / 1 / 20 / 2;
        }

        .grids > div > :nth-child(10) {
            grid-area: 20 / 1 / 21 / 2;
        }

        .grids > div > :nth-child(11) {
            grid-area: 21 / 1 / 22 / 2;
        }
}


#medusa {
    display: grid;
    width: 100%;
    height: 60vh;
    grid-template-rows: 70vh;
    background-image: url('../media/images/fondo-medusa.jpg');
    background-size: cover;
    background-position: center center;
    text-align: center;
    align-items: center;
    justify-items: center;
    font-family: var(--fontFamily1);
    margin-bottom:5em;
}

        #medusa > div > img {
            width: 25em;
            display: inline-block;
        }

        #medusa > div > p {
            color: white;
            text-align: center;
            font-size: 1.5em;
            
        }
            #medusa > div > p:nth-child(4) {
                display:inline-block;
                font-size: 1em;
                margin: 0;
                padding: 0;
                text-shadow: 0 1px 3px black;
                width: 90%;
                max-width:38em;
            }
    #medusa > div > h5 {
        color: var(--quatuorOrange);
        margin: 0;
        padding: 0;
        font-size: 1.4rem;
        text-shadow: 0 1px 3px black;
    }


    @media screen and (max-width:674px) {

        .grids > h2 {
            font-size: 2em ;
        }

        .grids {
            margin-bottom: 1em ;
        }

        #medusa > div > img {
            width:15em;
        }

    }
    /*-----*/
.grids > h3 {
    display: block;
    text-align: center;
    font-size: 3em;
   /* font-family: var(--fontFamily2);*/
    max-width: var(--max-width);
    width: calc(100% - 2em);
    margin: 1em auto;
}
h3 {
    font-size: 1.2em;
    padding-top: 1em;
    color: var(--quatuorBlue);
    font-weight: 400;
}