/*--- grid ---*/
.is-style-genera-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--wp--custom--grid--gap--desktop);
    row-gap: var(--wp--custom--grid--gap--desktop);
    padding: 0 var(--wp--custom--grid--padding--desktop);
    box-sizing: border-box;
    margin: 0 auto !important;
}

/* Layout tablet */
@media (max-width: 80rem) {
    .is-style-genera-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        padding: 0 var(--wp--custom--grid--padding--tablet);
        column-gap: var(--wp--custom--grid--gap--tablet);
        row-gap: var(--wp--custom--grid--gap--tablet);
    }
}

/* Layout mobile */
@media (max-width: 40rem) {
    .is-style-genera-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 0 var(--wp--custom--grid--padding--mobile);
        column-gap: var(--wp--custom--grid--gap--mobile);
        row-gap: var(--wp--custom--grid--gap--mobile);
    }
}


/* ============================================================
   DESKTOP (Grid 12 colonne)
   ============================================================ */

/* Start */
.item-d-start-1  { grid-column-start: 1; }
.item-d-start-2  { grid-column-start: 2; }
.item-d-start-3  { grid-column-start: 3; }
.item-d-start-4  { grid-column-start: 4; }
.item-d-start-5  { grid-column-start: 5; }
.item-d-start-6  { grid-column-start: 6; }
.item-d-start-7  { grid-column-start: 7; }
.item-d-start-8  { grid-column-start: 8; }
.item-d-start-9  { grid-column-start: 9; }
.item-d-start-10 { grid-column-start: 10; }
.item-d-start-11 { grid-column-start: 11; }
.item-d-start-12 { grid-column-start: 12; }

/* End*/ 
.item-d-end-2  { grid-column-end: 2; }
.item-d-end-3  { grid-column-end: 3; }
.item-d-end-4  { grid-column-end: 4; }
.item-d-end-5  { grid-column-end: 5; }
.item-d-end-6  { grid-column-end: 6; }
.item-d-end-7  { grid-column-end: 7; }
.item-d-end-8  { grid-column-end: 8; }
.item-d-end-9  { grid-column-end: 9; }
.item-d-end-10 { grid-column-end: 10; }
.item-d-end-11 { grid-column-end: 11; }
.item-d-end-12 { grid-column-end: 12; }
.item-d-end-13 { grid-column-end: 13; }

/* ============================================================
   TABLET (Grid 8 colonne ≈ da 1279px a 640px)
   ============================================================ */
@media (max-width: 80rem) {

    /* Start */
    .item-t-start-1 { grid-column-start: 1; }
    .item-t-start-2 { grid-column-start: 2; }
    .item-t-start-3 { grid-column-start: 3; }
    .item-t-start-4 { grid-column-start: 4; }
    .item-t-start-5 { grid-column-start: 5; }
    .item-t-start-6 { grid-column-start: 6; }
    .item-t-start-7 { grid-column-start: 7; }
    .item-t-start-8 { grid-column-start: 8; }

    /* End */
    .item-t-end-2 { grid-column-end: 2; }
    .item-t-end-3 { grid-column-end: 3; }
    .item-t-end-4 { grid-column-end: 4; }
    .item-t-end-5 { grid-column-end: 5; }
    .item-t-end-6 { grid-column-end: 6; }
    .item-t-end-7 { grid-column-end: 7; }
    .item-t-end-8 { grid-column-end: 8; }
    .item-t-end-9 { grid-column-end: 9; }
}

/* ============================================================
   SMARTPHONE (Grid 4 colonne ≈ sotto 640px)
   ============================================================ */
@media (max-width: 40rem) {

    /* Start */
    .item-m-start-1 { grid-column-start: 1; }
    .item-m-start-2 { grid-column-start: 2; }
    .item-m-start-3 { grid-column-start: 3; }
    .item-m-start-4 { grid-column-start: 4; }

    /* End */
    .item-m-end-2 { grid-column-end: 2; }
    .item-m-end-3 { grid-column-end: 3; }
    .item-m-end-4 { grid-column-end: 4; }
    .item-m-end-5 { grid-column-end: 5; }
}

/* --- Allineamento Verticale Figli --- */

/* Desktop & Generale */
.item-d-align-start   { align-self: start; }
.item-d-align-center  { align-self: center; }
.item-d-align-end     { align-self: end; }
.item-d-align-stretch { align-self: stretch; }

/* Tablet */
@media (max-width: 80rem) {
    .item-t-align-start   { align-self: start; }
    .item-t-align-center  { align-self: center; }
    .item-t-align-end     { align-self: end; }
    .item-t-align-stretch { align-self: stretch; }
}

/* Smartphone */
@media (max-width: 40rem) {
    .item-m-align-start   { align-self: start; }
    .item-m-align-center  { align-self: center; }
    .item-m-align-end     { align-self: end; }
    .item-m-align-stretch { align-self: stretch; }
}

/* --- Allineamento Orizzontale Figli --- */
/* Desktop & Generale */
.item-d-justify-center  { justify-self: center; }
.item-d-justify-end     { justify-self: end; }
.item-d-justify-stretch { justify-self: stretch; }

/* Tablet */
@media (max-width: 80rem) {
    .item-t-justify-center  { justify-self: center; }
    .item-t-justify-end     { justify-self: end; }
    .item-t-justify-stretch { justify-self: stretch; }
}

/* Smartphone */
@media (max-width: 40rem) {
    .item-m-justify-center  { justify-self: center; }
    .item-m-justify-end     { justify-self: end; }
    .item-m-justify-stretch { justify-self: stretch; }
}
