.at-introWithLinks__inner {
    display: grid;
    grid-template-rows: auto auto 10px auto 30px 1fr;
    grid-template-columns: 20px 1fr 20px;
}

.at-introWithLinks__title {
    font-size: var(--h1Size);
    grid-row: 1;
    grid-column: 1/-1;
}

.at-introWithLinks__text {
    grid-row: 2;
    grid-column: 1/-1;
}

.at-introWithLinks__imageWrapper {
    grid-row: 5/-1;
    grid-column: 1/-1;
}

.at-introWithLinks__image {
    display: block;
    width: 100%;
}

.at-introWithLinks__image--flipped {
    transform: scaleX(-1);
}

.at-introWithLinks__linksWrapper {
    grid-row: 4/5;
    grid-column: 1/-1;
    padding: var(--innerPaddingX);
    color: var(--baseLight100);
    background-color: var(--secondaryColor500);
    z-index: 1;
}

.at-introWithLinks__sectionTitle {
    font-size: var(--h3Size);
}

.at-introWithLinks__item + .at-introWithLinks__item {
    margin-top: 1rem;
}

.at-introWithLinks__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--baseLight100);
    font-weight: 600;
    text-decoration: none;
}

.at-introWithLinks__link:hover {
    text-decoration: underline;
}

.at-introWithLinks__linkIcon {
    margin-left: 1rem;
    color: var(--primaryColor500);
    font-size: .8rem;
}

@media (min-width: 768px) {
    .at-introWithLinks__inner {
        grid-template-rows: auto auto 30px 60px 150px 1fr;
        grid-template-columns: 1fr 5% 0.5fr 150px;
    }

    .at-introWithLinks__sectionTitle {
        font-size: var(--h2Size);
    }

    .at-introWithLinks__text {
        grid-column: 1/2;
    }

    .at-introWithLinks__imageWrapper {
        grid-row: 4/-1;
        grid-column: 1/-2;
    }

    .at-introWithLinks__linksWrapper {
        grid-row: 2/5;
        grid-column: 3/-1;
    }
}