@import './style.css';

.mission-wrapper {
    width: 75%;
    min-width: 700px;
    max-width: 1200px;
    margin: auto;
    margin-bottom: var(--space1);

    display: flex;
    gap: var(--space2);
}

.mission-text {
    display: flex;
    flex-direction: column;
    gap: var(--space3);
}

ul {
    width: 90%;
    position: relative;
    left: var(--space2);
    display: flex;
    flex-direction: column;
    gap: var(--space3);
}

.mission-image {
    width: 50%;
    height: 85%;
    border-radius: 20px;
}

/**************** RESPONSIVE EFFECTS ****************/

@media (max-width: 1200px) {
    .mission-image {
        display: none;
    }
}

@media (max-width: 850px) {
    .mission-wrapper {
        width: 85%;
        min-width: 400px;
    }
}