@import "presets.css";

body, h1, p, footer, div, section {
    margin: 0;
    box-sizing: border-box;
}

header {
    padding-top: 48px;
}

@media (1000px <= width) {
    header {
        padding-top: var(--spacing-1000);
    }
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    overflow-x: hidden;
    text-align: center;
    min-height: 100vh;
    background-color: var(--fafafa);
}

body > * {
    min-width: 369px;
    max-width: min(100vw, 768px);
}

@media (1000px <= width) {
    body > main {
        max-width: none;
    }
}

main {
    padding: var(--spacing-400) 0;
}

.zero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding: var(--spacing-400);
}

@media (700px <= width) {
    .zero {
        gap: var(--spacing-900);
        padding: var(--spacing-800);
    }
}

.zero::before {
    content: url("assets/tablet/image-hero.png");
    transform: scale(0.53);
    margin: -72px 0;
}

@media (700px <= width < 1000px) {
    .zero::before {
        transform: none;
        margin: 0;
    }
}

@media (1000px <= width) {
    .zero {
        flex-direction: row;
        justify-content: space-around;
        gap: var(--spacing-400);
    }

    .zero::before {
        content: url("assets/desktop/image-hero-left.png");
        transform: translate(-82px, -23px);
        margin: 0;
        align-self: flex-start;
    }

    .zero .text-container {
        align-self: center;
    }

    .zero::after {
        content: url("assets/desktop/image-hero-right.png");
        transform: translateX(82px);
        align-self: flex-end;
    }
}

.text-container {
    padding-bottom: var(--spacing-400);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-300);
    max-width: 504px;
}

.zero .text-container {
    max-width: 448px;
}

.text-container h1 {
    color: var(--slate-900);
}

.text-container p {
    color: var(--slate-600);
}

.buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-200)
}

button {
    padding: var(--spacing-200) var(--spacing-500);
    border-radius: 29px;
    border-style: none;
    background-color: var(--purple-600);
    color: white;
}

button:hover {
    background-color: var(--purple-600-hovered);
}

.version {
    color: var(--purple-300);
}

.alternate-button {
    background-color: var(--cyan-600);
}

.alternate-button:hover {
    background-color: var(--cyan-600-hovered);
}

.alternate-button .version {
    color: var(--cyan-300);
}

.text-container header p {
    text-transform: uppercase;
    color: var(--cyan-600);
}

.one {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-800);
    padding: 0 var(--spacing-400);
}

@media (700px <= width) {
    .one {
        padding: 0 var(--spacing-700);
    }
}

@media (1000px <= width) {
    .one {
        margin: 0 var(--spacing-1000);
    }
}

.users {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-200);
}

@media (700px <= width) {
    .users {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        max-width: 1120px;
    }
}

.users img {
    width: 100%;
    border-radius: var(--spacing-100);
}

.page-number {
    height: calc(56px + 80px);
    display: grid;
    justify-items: center;
    color: var(--slate-600);
}

.page-number::before {
    content: "";
    border-right: 1px solid var(--slate-300);
    height: 80px;
    width: 0;
}

.page-number p {
    width: 56px;
    height: 56px;
    display: grid;
    align-items: center;
    border: 1px solid var(--slate-300);
    border-radius: 50%;
    line-height: 100%;
    background-color: var(--fafafa);
}

footer {
    display: grid;
    min-width: 100vw;
    justify-content: center;
    background-blend-mode: soft-light;
    background-image: url("assets/mobile/image-footer.jpg"), linear-gradient(var(--cyan-600));
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: calc(80px + (56px / 2));
    background-size: cover;
    padding-bottom: var(--spacing-400);
}

@media (700px <= width < 1000px) {
    footer {
        background-image: url("assets/tablet/image-footer.jpg"), linear-gradient(var(--cyan-600));
    }
}

@media (1000px <= width) {
    footer {
        background-image: url("assets/desktop/image-footer.jpg"), linear-gradient(var(--cyan-600));
    }
}

footer .text-container {
    max-width: 375px;
    padding-top: calc(var(--spacing-800) - (56px / 2));
}

footer .text-container h1,
footer .text-container p {
    color: white;
}

@media (700px <= width < 1000px) {
    footer {
        padding-bottom: 0;
    }

    footer .text-container {
        padding: calc(var(--spacing-800) - (56px / 2)) 0 var(--spacing-800) 0;
    }
}

@media (1000px <= width) {
    footer {
        padding-bottom: 0;
    }

    footer .text-container {
        display: grid;
        grid-template-columns: 1.2fr 0.95fr 0.69fr;
        max-width: 1120px;
        text-align: left;
        gap: var(--spacing-400);
        padding: calc(var(--spacing-1400) - (56px / 2)) 0 var(--spacing-1400) 0;
    }
}