.boxes-loop {
    --testimonial-font-family: Baskerville, Baskerville Old Face, Hoefler Text, Garamond, Times New Roman, serif;
    --testimonial-font-size: 1.5rem;
    --testimonial-spacing: 0.5rem;
}

.boxes-loop .boxes-container {
    display: grid;

    &.column-layout-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    &.column-layout-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    &.column-layout-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    &.column-layout-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    gap: 20px;
}

.boxes-loop .box {
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.boxes-loop .box a {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.boxes-loop .box .box-image {
    width: 100%;
    border-radius: 0;
}

.boxes-loop .services .box {
    background: none;
    box-shadow: none;
    border-radius: 4px;

    &.consultair-red {
        border: 1px solid var(--wp--preset--color--consultair-red);
        box-shadow: 6px 6px 0 0 rgba(209, 53, 44, 0.3);

        &:hover {
            box-shadow: 6px 6px 0 0 var(--wp--preset--color--consultair-red);
        }
    }

    &.consultair-green {
        border: 1px solid var(--wp--preset--color--consultair-green);
        box-shadow: 6px 6px 0 0 rgba(89, 163, 72, 0.3);

        &:hover {
            box-shadow: 6px 6px 0 0 var(--wp--preset--color--consultair-green);
        }
    }

    &.consultair-light-blue {
        border: 1px solid var(--wp--preset--color--consultair-light-blue);
        box-shadow: 6px 6px 0 0 rgba(64, 138, 202, 0.3);

        &:hover {
            box-shadow: 6px 6px 0 0 var(--wp--preset--color--consultair-light-blue);
        }
    }

    &.consultair-dark-blue {
        border: 1px solid var(--wp--preset--color--consultair-dark-blue);
        box-shadow: 6px 6px 0 0 rgba(43, 46, 130, 0.3);

        &:hover {
            box-shadow: 6px 6px 0 0 var(--wp--preset--color--consultair-dark-blue);
        }
    }
}


@media only screen and (max-width: 1200px) {
    .boxes-loop .boxes-container.column-layout-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media only screen and (max-width: 978px) {
    .boxes-loop .boxes-container.column-layout-3,
    .boxes-loop .boxes-container.column-layout-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media only screen and (max-width: 640px) {
    .boxes-loop .boxes-container.column-layout-2,
    .boxes-loop .boxes-container.column-layout-3,
    .boxes-loop .boxes-container.column-layout-4 {
        grid-template-columns: repeat(1, 1fr);
    }
}