/* Schermi grandi o ad alta risoluzione */
@media screen and (min-width: 1690px) {

    .ins-card {
        display: grid;
        grid-template-rows: 9rem 6rem auto 2rem;
        gap: 0.3rem;
        height: 24rem;
        width: 16rem;
        border-radius: 0.5rem;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
        padding: 0.4rem;
    }

        .ins-card > div {
            height: 100%;
            width: 100%;
        }

    .ins-card-img-promo {
        height: 9rem;
        width: 100%;
    }

    .ins-card-nombre {
        display: grid;
        grid-template-rows: 2.5rem auto;
        gap: 0.3rem
    }

        .ins-card-nombre > h1 {
            font-family: var(--fuenteLight);
            font-size: 0.9rem;
            color: var(--colorBlack);
            font-weight: bold;
            overflow-wrap: break-word;
            text-align: justify;
            height: 100%;
            width: 100%;
            text-transform: uppercase;
        }

        .ins-card-nombre > span {
            font-family: var(--fuenteLight);
            font-size: 0.7rem;
            color: var(--colorGray);
            overflow-wrap: break-word;
            text-align: justify;
            height: 100%;
            width: 100%;
        }

    .ins-card-info {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        height: 100%;
        padding-left: 0.5rem;
    }

        .ins-card-info > div {
            display: grid;
            grid-template-columns: 1.5rem auto;
            width: 100%;
        }

            .ins-card-info > div img {
                height: 1rem;
                width: 1rem;
            }

            .ins-card-info > div span {
                font-family: var(--fuenteLight);
                font-size: 0.7rem;
                color: var(--colorGray);
                font-weight: 300;
                text-align: left;
                white-space: nowrap; /* Evita que el texto salte de línea */
                overflow: hidden; /* Oculta el texto que se sale del contenedor */
                text-overflow: ellipsis; /* Muestra los puntos suspensivos */
            }

    .ins-card-detalle {
        display: inline-block;
        text-decoration: none;
        background-color: var(--color4);
        font-size: 1rem;
        font-weight: 300;
        font-family: var(--fuenteLight);
        text-align: center;
        color: var(--colorWhite);
        height: 2rem;
        width: 100%;
        border-radius: 0.3rem;
        padding-top: 0.3rem;
    }
}

/* Schermi Desktop o Portatili */
@media screen and (min-width: 1280px) and (max-width: 1689px) {
    .ins-card {
        display: grid;
        grid-template-rows: 9rem 6rem auto 2rem;
        gap: 0.3rem;
        height: 24rem;
        width: 16rem;
        border-radius: 0.5rem;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
        padding: 0.4rem;
    }

        .ins-card > div {
            height: 100%;
            width: 100%;
        }

    .ins-card-img-promo {
        height: 9rem;
        width: 100%;
    }

    .ins-card-nombre {
        display: grid;
        grid-template-rows: 2.5rem auto;
        gap: 0.3rem
    }

        .ins-card-nombre > h1 {
            font-family: var(--fuenteLight);
            font-size: 0.9rem;
            color: var(--colorBlack);
            font-weight: bold;
            overflow-wrap: break-word;
            text-align: justify;
            height: 100%;
            width: 100%;
            text-transform: uppercase;
        }

        .ins-card-nombre > span {
            font-family: var(--fuenteLight);
            font-size: 0.7rem;
            color: var(--colorGray);
            overflow-wrap: break-word;
            text-align: justify;
            height: 100%;
            width: 100%;
        }

    .ins-card-info {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        height: 100%;
        padding-left: 0.5rem;
    }

        .ins-card-info > div {
            display: grid;
            grid-template-columns: 1.5rem auto;
            width: 100%;
        }

            .ins-card-info > div img {
                height: 1rem;
                width: 1rem;
            }

            .ins-card-info > div span {
                font-family: var(--fuenteLight);
                font-size: 0.7rem;
                color: var(--colorGray);
                font-weight: 300;
                text-align: left;
                white-space: nowrap; /* Evita que el texto salte de línea */
                overflow: hidden; /* Oculta el texto que se sale del contenedor */
                text-overflow: ellipsis; /* Muestra los puntos suspensivos */
            }

    .ins-card-detalle {
        display: inline-block;
        text-decoration: none;
        background-color: var(--color4);
        font-size: 1rem;
        font-weight: 300;
        font-family: var(--fuenteLight);
        text-align: center;
        color: var(--colorWhite);
        height: 2rem;
        width: 100%;
        border-radius: 0.3rem;
        padding-top: 0.3rem;
    }
}

/* Tablet in modalità horizontal */
@media screen and (min-width: 737px) and (max-width: 1279px) {
    .ins-card {
        display: grid;
        grid-template-rows: 9rem 6rem auto 2rem;
        gap: 0.3rem;
        height: 24rem;
        width: 16rem;
        border-radius: 0.5rem;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
        padding: 0.4rem;
    }

        .ins-card > div {
            height: 100%;
            width: 100%;
        }

    .ins-card-img-promo {
        height: 9rem;
        width: 100%;
    }

    .ins-card-nombre {
        display: grid;
        grid-template-rows: 2.5rem auto;
        gap: 0.3rem
    }

        .ins-card-nombre > h1 {
            font-family: var(--fuenteLight);
            font-size: 0.9rem;
            color: var(--colorBlack);
            font-weight: bold;
            overflow-wrap: break-word;
            text-align: justify;
            height: 100%;
            width: 100%;
            text-transform: uppercase;
        }

        .ins-card-nombre > span {
            font-family: var(--fuenteLight);
            font-size: 0.7rem;
            color: var(--colorGray);
            overflow-wrap: break-word;
            text-align: justify;
            height: 100%;
            width: 100%;
        }

    .ins-card-info {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        height: 100%;
        padding-left: 0.5rem;
    }

        .ins-card-info > div {
            display: grid;
            grid-template-columns: 1.5rem auto;
            width: 100%;
        }

            .ins-card-info > div img {
                height: 1rem;
                width: 1rem;
            }

            .ins-card-info > div span {
                font-family: var(--fuenteLight);
                font-size: 0.7rem;
                color: var(--colorGray);
                font-weight: 300;
                text-align: left;
                white-space: nowrap; /* Evita que el texto salte de línea */
                overflow: hidden; /* Oculta el texto que se sale del contenedor */
                text-overflow: ellipsis; /* Muestra los puntos suspensivos */
            }

    .ins-card-detalle {
        display: inline-block;
        text-decoration: none;
        background-color: var(--color4);
        font-size: 1rem;
        font-weight: 300;
        font-family: var(--fuenteLight);
        text-align: center;
        color: var(--colorWhite);
        height: 2rem;
        width: 100%;
        border-radius: 0.3rem;
        padding-top: 0.3rem;
    }
}

/* Tablet in modalità verticale */
@media screen and (min-width: 481px) and (max-width: 736px) {
    .ins-card {
        display: grid;
        grid-template-rows: 6rem 5rem auto 2rem;
        gap: 0.3rem;
        height: 19rem;
        width: 11rem;
        border-radius: 0.5rem;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
        padding: 0.4rem;
    }

        .ins-card > div {
            height: 100%;
            width: 100%;
        }

    .ins-card-img-promo {
        height: 6rem;
        width: 100%;
    }

    .ins-card-nombre {
        display: grid;
        grid-template-rows: 2rem 3rem;
        gap: 0.3rem
    }

        .ins-card-nombre > h1 {
            font-family: var(--fuenteLight);
            font-size: 0.6rem;
            color: var(--colorBlack);
            font-weight: bold;
            overflow-wrap: break-word;
            text-align: justify;
            height: 100%;
            width: 100%;
            text-transform: uppercase;
        }

        .ins-card-nombre > span {
            font-family: var(--fuenteLight);
            font-size: 0.5rem;
            color: var(--colorGray);
            overflow-wrap: break-word;
            text-align: justify;
            height: 100%;
            width: 100%;
        }

    .ins-card-info {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        height: 100%;
        padding-left: 0.3rem;
    }

        .ins-card-info > div {
            display: grid;
            grid-template-columns: 1rem auto;
            width: 100%;
        }

            .ins-card-info > div img {
                height: 0.8rem;
                width: 0.8rem;
            }

            .ins-card-info > div span {
                font-family: var(--fuenteLight);
                font-size: 0.5rem;
                color: var(--colorGray);
                font-weight: 300;
                text-align: left;
                white-space: nowrap; /* Evita que el texto salte de línea */
                overflow: hidden; /* Oculta el texto que se sale del contenedor */
                text-overflow: ellipsis; /* Muestra los puntos suspensivos */
            }

    .ins-card-detalle {
        display: inline-block;
        text-decoration: none;
        background-color: var(--color4);
        font-size: 0.9rem;
        font-weight: 300;
        font-family: var(--fuenteLight);
        text-align: center;
        color: var(--colorWhite);
        height: 2rem;
        width: 100%;
        border-radius: 0.3rem;
        padding-top: 0.3rem;
    }
}

/* Smartphone o piccoli Tablet */
@media screen and (max-width: 480px) {
    .ins-card {
        display: grid;
        grid-template-rows: 6rem 5rem auto 2rem;
        gap: 0.3rem;
        height: 19rem;
        width: 11rem;
        border-radius: 0.5rem;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
        padding: 0.4rem;
    }

        .ins-card > div {
            height: 100%;
            width: 100%;
        }

    .ins-card-img-promo {
        height: 6rem;
        width: 100%;
    }

    .ins-card-nombre {
        display: grid;
        grid-template-rows: 2rem 3rem;
        gap: 0.3rem
    }

        .ins-card-nombre > h1 {
            font-family: var(--fuenteLight);
            font-size: 0.6rem;
            color: var(--colorBlack);
            font-weight: bold;
            overflow-wrap: break-word;
            text-align: justify;
            height: 100%;
            width: 100%;
            text-transform: uppercase;
        }

        .ins-card-nombre > span {
            font-family: var(--fuenteLight);
            font-size: 0.5rem;
            color: var(--colorGray);
            overflow-wrap: break-word;
            text-align: justify;
            height: 100%;
            width: 100%;
        }

    .ins-card-info {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        height: 100%;
        padding-left: 0.3rem;
    }

        .ins-card-info > div {
            display: grid;
            grid-template-columns: 1rem auto;
            width: 100%;
        }

            .ins-card-info > div img {
                height: 0.8rem;
                width: 0.8rem;
            }

            .ins-card-info > div span {
                font-family: var(--fuenteLight);
                font-size: 0.5rem;
                color: var(--colorGray);
                font-weight: 300;
                text-align: left;
                white-space: nowrap; /* Evita que el texto salte de línea */
                overflow: hidden; /* Oculta el texto que se sale del contenedor */
                text-overflow: ellipsis; /* Muestra los puntos suspensivos */
            }

    .ins-card-detalle {
        display: inline-block;
        text-decoration: none;
        background-color: var(--color4);
        font-size: 0.9rem;
        font-weight: 300;
        font-family: var(--fuenteLight);
        text-align: center;
        color: var(--colorWhite);
        height: 2rem;
        width: 100%;
        border-radius: 0.3rem;
        padding-top: 0.3rem;
    }
}