/*
    File: css/components/common-spaces.css
    Description: Styles for the common spaces section (and find us).
*/

.common-spaces {
    padding: 50px 20px;
    background-color: #f9f9f9;
    text-align: center; /* Center the whole section */
}

.common-spaces__content {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Put the elements by colomns */
    align-items: center; /* Centrer horizontally the elements */
    gap: 30px; /* Space between the elements */
}

.common-spaces__images {
    flex: 0 0 40%;
    display: flex;
    gap: 15px;
}

.common-spaces__images img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    object-fit: cover;
    height: 200px;
}

.common-spaces__text {
    text-align: center; /* Center the texte */
    max-width: 80%;
}

.common-spaces__description {
    margin-bottom: 20px;
}

/* Styles for the "find-us" section */
.find-us {
    padding: 50px 20px;
    background-color: #eee;
}

.find-us__content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: flex-start;
}

.find-us__map {
    flex: 1 1 450px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.find-us__map iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.find-us__address {
    flex: 1 1 300px;
    text-align: center; /* Center the text content */
}

.find-us__address h3 {
    margin-bottom: 15px;
    color: #333;
}

.find-us__address p {
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
}

/* Media queries for small screens */

@media (max-width: 768px) {
    .common-spaces {
        padding: 40px 15px;
    }

    .common-spaces__content {
        gap: 20px;
    }

    .common-spaces__images {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .common-spaces__images img {
        height: auto;
    }

    .common-spaces__text {
        max-width: 100%;
    }

    .common-spaces__description {
        margin-bottom: 15px;
    }
}