.container {
    max-width: 80rem;
    margin-inline: auto;

    padding-inline: 2rem;
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.grid-4-columns {
    grid-template-columns: repeat(4, 1fr);
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-025 {
    gap: .25rem;
}

.gap-05 {
    gap: .5rem;
}

.gap-1 {
    gap: 1rem;
}

.gap-2 {
    gap: 2rem;
}

.max-lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;
}

.max-2 {
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.max-3 {
    line-clamp: 3;
    -webkit-line-clamp: 3;
}

.max-4 {
    line-clamp: 4;
    -webkit-line-clamp: 4;
}

@media (width < 70rem) {
    .grid-4-columns {
        grid-template-columns: 1fr;
    }
}

@media (width < 40rem) {
    .container {
        padding-inline: 1rem;
    }

    .desktop-only {
        display: none;
    }
}