html {
    scroll-behavior: smooth;
}

body {
    background-color: #dedede;
    color: #000;
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
    font-size: 32px;
}

a {
    color: #000;
    text-decoration: none;
}

p {
    font-size: 25px;
    text-align: center;
}

footer {
    text-align: center;
    padding: 10px;
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

figure {
    margin: 0;
    padding: 10px;
    text-align: center;
    background-color: #fff;
    color: #000;
    border: 3px solid #555;
    overflow: hidden;
}

figure img {
    width: 150px;
    height: 150px;
    display: block;
    margin: auto;
}

@media (min-width: 772px) {
    .grid {
        grid-template-columns: 1fr 1fr;
    }

    figure {
        border-radius: 50%;
    }

    figure:last-child {
        grid-column: 1 / 3;
    }
}

@media (min-width: 992px) {
    figure {
        border-radius: 0;
    }

    figure:nth-child(3n) {
        grid-column: 1 / 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #222;
        color: #ffe97a;
    }

    a {
        color: #ffe97a;
    }

    figure {
        background-color: #1a1a2e;
        color: #ffe97a;
        border-color: #000;
    }
}