@import "../../assets/css/variable.css";

.services-grid {
    margin-top: var(--margin-top);
}
.services-grid__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--margin);
}
.services-grid__container-header {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    text-align: center;
}
.services-grid__icon {
    margin-bottom: 2rem;
}
.services-grid__items {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.services-grid__item {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1rem;
    padding: var(--margin);
    border-radius: var(--radius);
    border: solid 3px var(--border-color);
}
.services-grid__item:hover {
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1);
    transform: translateY(-2px);
}

.services-grid__buttons {
    margin-top: var(--margin-top);
}

.services-grid__item--full {
    width: 100% !important;
}

/* Da 600px: 2 colonne */
@media (min-width: 900px) {
    .services-grid__items {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .services-grid__item {
        width: calc(50% - 0.5rem); /* 1rem gap / 2 */
    }
    body.wp-admin .services-grid__item {
        width: calc(37% - 0.5rem); /* 1rem gap / 2 */
    }
    .services-grid__buttons {
        margin-top: 0;
    }
}