@import '../main.css';

section.introduction .text {
    margin: var(--measure-2000) 0;
}

section.introduction .list {
    display: flex;
    gap: var(--measure-0500);
    flex-direction: row;
    flex-wrap: wrap;
}

.myHistory .myHistory-image {
    margin: var(--measure-2000) 0;
}

.myHistory .button-group {
    margin-top: var(--measure-2000);
}

.experiences .list .component {
    margin-top: var(--measure-1500);
}

.experiences .item {
    display: flex;
    flex-direction: column;
    gap: var(--measure-0500);
}

@media (min-width: 1025px) {
    section.introduction .text {
        margin: var(--measure-3000) 0;
    }

    .myHistory .button-group {
        margin-top: var(--measure-3000);
    }

    .experiences .list .component {
        margin-top: var(--measure-2000);
    }

    .experiences .item {
        gap: var(--measure-0750);
    }
}

@media (min-width: 1400px) {
    .myHistory .myHistory-image {
        margin: var(--measure-3000) 0;
    }

    .experiences .list .component {
        margin-top: var(--measure-3000);
    }
}