/*--------------------------------------------------------------
# Servicios Section Styles
--------------------------------------------------------------*/
.servicios-section {
    padding: var(--section-padding-vertical);
    background-color: var(--color-background);
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 80vh;
}

.container-servicios {
    padding: var(--container-padding-mobile) 0;
}

.servicios-section h2 {
    font-family: var(--font-secondary);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.7rem, 4vw, 2.8rem);
    margin-bottom: var(--spacing-lg);
}

.servicios-content-wrapper {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns-mobile), minmax(0, 1fr));
    grid-template-rows: repeat(23, minmax(0, 1fr));
    height: 80vh;
    min-height: 500px;
    gap: var(--spacing-sm);
    position: relative;
}

.item {
    padding: var(--spacing-sm);
    transition: all 0.3s ease;
}

.item:not(.item-7):not(.item-8) {
    font-weight: 500;
    z-index: 10;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/*--------------------------------------------------------------
    # Mobile Grid Positioning (Your Current Working Layout)
    --------------------------------------------------------------*/

.item-1 {
    /* background-color: rgb(109, 236, 141); */
    grid-area: 2 / 1 / 6 / 8;
    font-size: 1.25rem;
    line-height: 1.3rem;
}

.item-2 {
    /* background-color: rgb(82, 146, 195); */
    grid-area: 6 / 2 / 8 / 8;
    font-size: 1rem;
    line-height: 1.1rem;
}

.item-3 {
    /* background-color: rgb(180, 125, 53); */
    grid-area: 8 / 1 / 11 / 7;
    font-size: 1.1rem;
    line-height: 1.3rem;
}

.item-4 {
    /* background-color: rgb(191, 98, 166); */
    grid-area: 1 / 8 / 4 / 13;
    font-size: 1.1rem;
    line-height: 1.1rem;
}

.item-5 {
    /* background-color: rgb(109, 236, 141); */
    grid-area: 4 / 10 / 8 / 14;
    z-index: 13;
    font-size: 1.25rem;
    line-height: 1.2rem;
}

.item-6 {
    /* background-color: rgb(241, 67, 183); */
    grid-area: 9 / 9 / 11 / 14;
    z-index: 12;
    font-size: 1rem;
    line-height: 1rem;
}

.item-7 {
    /* background-color: rgb(244, 170, 150); */
    grid-area: 6 / 2 / 20 / 12;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: end;
}

.item-7 img {
    object-fit: fill;
}

.item-8 {
    /* background-color: rgb(109, 236, 141); */
    grid-area: 19 / 1 / 24 / 14;
    font-size: 1.20rem;
    font-weight: 400;
    line-height: 1.3rem;
    /* text-wrap: balance; */
}

/*--------------------------------------------------------------
# MARK: TABLET 768px
--------------------------------------------------------------*/
@media (min-width: 768px) {

    .servicios-content-wrapper {
        grid-template-columns: repeat(var(--grid-columns-tablet), minmax(0, 1fr));
        height: 65vh;
        min-height: 700px;
        gap: var(--spacing-md);
    }

    .container-servicios {
        padding: var(--container-padding-tablet) 0;
    }

    .servicios-section h2 {
        font-size: clamp(2rem, 5vw, 2.8rem);
        margin-bottom: var(--spacing-md);
    }

    .item-1 {
        grid-area: 2 / 1 / 6 / 9;
        font-size: 1.4rem;
    }

    .item-2 {
        grid-area: 6 / 2 / 8 / 9;
        font-size: 1.1rem;
    }

    .item-3 {
        grid-area: 8 / 1 / 11 / 8;
        font-size: 1.2rem;
    }

    .item-4 {
        grid-area: 1 / 11 / 4 / 18;
        font-size: 1.2rem;
    }

    .item-5 {
        grid-area: 4 / 13 / 8 / 19;
        font-size: 1.4rem;
    }

    .item-6 {
        grid-area: 9 / 12 / 11 / 19;
        font-size: 1.1rem;
    }

    .item-7 {
        grid-area: 6 / 5 / 20 / 15;
    }

    .item-8 {
        grid-area: 20 / 2 / 25 / 18;
        font-size: 1.4rem;
        padding: var(--spacing-md);
    }

    .item-7>img {
        max-height: 450px;
        width: auto;
    }
}

/*--------------------------------------------------------------
# MARK: DESKTOP 1024px
--------------------------------------------------------------*/

@media (min-width: 1024px) {
    .servicios-content-wrapper {
        grid-template-columns: repeat(var(--grid-columns-desktop), minmax(0, 1fr));
        height: 65vh;
        min-height: 500px;
        gap: var(--spacing-lg);
        max-width: 1400px;
        margin: 0 auto;
    }

    .container-servicios {
        padding: var(--container-padding-desktop) 0;
    }

    .servicios-section h2 {
        font-size: clamp(2.2rem, 4vw, 3.2rem);
        margin-bottom: var(--spacing-xxl);
    }

    .item-1 {
        grid-area: 3 / 2 / 7 / 10;
        font-size: 1.6rem;
        line-height: 1.4;
    }

    .item-2 {
        grid-area: 7 / 3 / 9 / 10;
        font-size: 1.3rem;
    }

    .item-3 {
        grid-area: 9 / 1 / 12 / 9;
        font-size: 1.4rem;
    }

    .item-4 {
        grid-area: 2 / 16 / 5 / 24;
        font-size: 1.4rem;
    }

    .item-5 {
        grid-area: 5 / 18 / 9 / 25;
        font-size: 1.6rem;
    }

    .item-6 {
        grid-area: 10 / 17 / 12 / 25;
        font-size: 1.3rem;
    }

    .item-7 {
        grid-area: 6 / 8 / 20 / 18;
    }

    .item-8 {
        grid-area: 20 / 4 / 24 / 22;
        font-size: 1.5rem;
        padding: var(--spacing-md);
    }

}

/*--------------------------------------------------------------
MARK: BIG SCREENS +1400px
--------------------------------------------------------------*/

@media (min-width: 1400px) {

    .servicios-content-wrapper {
        grid-template-columns: repeat(var(--grid-columns-large), minmax(0, 1fr));
        height: 60vh;
        min-height: 700px;
    }

    .item-1 {
        grid-area: 3 / 3 / 7 / 12;
        font-size: 1.8rem;
    }

    .item-2 {
        grid-area: 7 / 4 / 9 / 12;
        font-size: 1.4rem;
    }

    .item-3 {
        grid-area: 9 / 2 / 12 / 11;
        font-size: 1.5rem;
    }

    .item-4 {
        grid-area: 2 / 20 / 5 / 29;
        font-size: 1.5rem;
    }

    .item-5 {
        grid-area: 5 / 22 / 9 / 31;
        font-size: 1.8rem;
    }

    .item-6 {
        grid-area: 10 / 21 / 12 / 31;
        font-size: 1.4rem;
    }

    .item-7 {
        grid-area: 6 / 10 / 20 / 22;
    }

    .item-8 {
        grid-area: 20 / 6 / 24 / 26;
        font-size: 1.6rem;
    }

    .item-7>img {
        max-height: 550px;
        width: auto;
    }
}