:root {
    --maw: 1440px;
    --space-outer: 20px;
}

body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-family: 'Inter', sans-serif;
}

.container {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--maw);
    padding-left: var(--space-outer);
    padding-right: var(--space-outer);
}

.grid  {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

.grid__item {
    grid-column: 3 / span 8;
}

/* COMMON */
.header,
.footer {
    padding: 2rem 0;
}

.main-header img {
    margin: 3rem auto;
}

/* MAIN */
.messages {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.message-right {
    margin-left: auto;
    position: relative;
}

.message-head {
    position: absolute;
    top: -25px;
    left: -40px;
}

.message-left,
.message-right {
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 2rem;
}

.footer-links {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-links a {
    color: #000;
    text-decoration: none;
    position: relative;
}

.footer-links__item {
    content: '';
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0 140%;
    padding-bottom: 10px;
}

.footer-links__item--c {
    background-image: url('./assets/underline-c.svg');
}

.footer-links__item--p {
    background-image: url('./assets/underline-p.svg');
}

.footer-links__store {
    padding: 1rem;
    background-repeat: no-repeat;
    background-size: 100%;
}


@media (hover: hover) {
    .footer-links__item:hover {
        background-position: 0 100%;
    }

    .footer-links__store:hover {
        background-image: url('./assets/store-hover.svg');
    }
}

.is-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@media only screen and (max-width: 600px) {
    :root {
        --maw: 100%;
    }

    .grid__item {
        grid-column: auto / span 12;
    }
}