.contacts-page {
    margin: 0 var(--lateral-margin) ;
    padding-bottom: var(--lateral-margin);
}

.contact-us {
    display: flex;
    gap: 40px;
}

.contact-us-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-direction: column;
    flex: 1 1 30%;
    min-height: 100vh;
    min-height: 100dvh;
    gap: 20px;
}

.contact-us-container p {
    margin: 0 0 20px 0;
}

.contact-title {
    width: fit-content;
}

.contact-title span {
    color: var(--primary-color);
}

h4.contact-info-type {
    color: var(--primary-color);
    margin: 0;
}

.contact-info-container {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.contact-info-item a {
    color: var(--text-color);
    text-decoration: none;
    margin-top: 5px;
    display: inline-block;
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: bold;
}

.contact-image {
    flex: 0 0 clamp(240px, 24vw, 400px);
    width: clamp(240px, 24vw, 400px);
    aspect-ratio: 500 / 657;
    background-image: url("/images/contacts/hero-lighttheme.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    align-self: center;
}

:root[data-theme="dark"] .contact-image {
    background-image: url("/images/contacts/hero-blacktheme.svg");
}

.contact-button {
    margin-top: 50px;
}

.contact-button:hover {
    background-color: var(--background-opaque);  
    color: var(--surface);
}

.behind-cima {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.profiles-container {
    display: flex;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 60px);
}

.behind-cima-profile {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-role {
    display: flex;
    align-items: center;
}

.profile-role span {
    margin: 0 1rem 0 0;
    width: 5rem;;
}

a.personal {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

.behind-cima-profile p {
    margin: 0 0 50px;
}

.contact-info-container-personal {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

@media (max-width: 1280px) {}

@media (max-width: 1024px) {}

@media (max-width: 900px) {
    .contact-us {
        position: relative;
        flex-direction: column;
    }

    .contact-us-container {
        flex: 1 1 auto;
    }

    .contact-image {
        position: absolute;
        top: 50%;
        left: 80%;
        transform: translate(-50%, -50%);
        flex: none;
        width: clamp(120px, 30vw, 400px);
        z-index: 1;
    }

    .profiles-container {
        flex-direction: column;
        gap: 8rem;
    }

    .behind-cima-profile {
        flex: 1 1 auto;
    }
}

@media (max-width: 600px) {
    .contact-image {
        top: 80%;
        left: 80%;
        transform: translate(-50%, -50%);
        width: clamp(120px, 15vw, 180px);
    }
}