index.less

@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap");

:root {
    /* Primary */
    --bright-orange: hsl(31, 77%, 52%);
    --dark-cyan: hsl(184, 100%, 22%);
    --very-dark-cyan: hsl(179, 100%, 13%);

    /* Neutral */
    --transparent-white: hsla(0, 0%, 100%, 0.75);
    --very-light-gray: hsl(0, 0%, 95%);

    font-size: 15px;

    font-family: "Lexend Deca", sans-serif;
}

html {
    max-width: 1440px;
    min-height: 664px;
    margin: auto;
    width: 100%;
    height: 100%;
    background-color: var(--transparent-white);

    body {
        margin: auto;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        main {
            border-radius: 0.5rem;
            overflow: clip;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-columns: minmax(100%, 1fr);
            max-width: 920px;
            height: 502px;
            margin: 5.85rem 1.6rem;

            section {
                padding: 3.2rem;
                position: relative;

                img {
                    width: 4.4rem;
                    height: auto;
                }

                h1 {
                    text-transform: uppercase;
                    color: var(--very-light-gray);
                    font-family: "Big Shoulders Display", cursive;
                    font-size: 2.75rem;
                    margin: 1.3em 0;
                    line-height: 0;
                    animation: move-text 2s ease-out 1s forwards;
                }

                p {
                    color: var(--very-light-gray);
                    line-height: 1.5;
                    animation: move-text 2s ease-out 1s forwards;
                }

                a {
                    position: absolute;
                    display: block;
                    line-height: 0;
                    padding: 1.6em;
                    border-radius: 2rem;
                    outline: none;
                    background-color: var(--very-light-gray);
                    text-align: center;
                    font-family: "Lexend Deca", sans-serif;
                    border: 1px solid transparent;
                    cursor: pointer;
                    text-decoration: none;
                    width: 6.5rem;
                    opacity: 1;
                    bottom: 3rem;

                    &:hover {
                        background-color: transparent;
                        border-color: var(--very-light-gray);
                        color: var(--very-light-gray) !important;
                        transition: all 0.25s ease-in;
                    }
                }
            }

            section:first-child {
                background-color: var(--bright-orange);

                a {
                    color: var(--bright-orange);
                }
            }

            section:nth-child(2) {
                background-color: var(--dark-cyan);

                a {
                    color: var(--dark-cyan);
                }
            }

            section:last-child {
                background-color: var(--very-dark-cyan);

                a {
                    color: var(--very-dark-cyan);
                }
            }
        }
    }

    .attribution {
        position: absolute;
        bottom: 0;
        text-align: center;
        margin: 2em;
        font-weight: 300;
        color: var(--soft-blue);

        :any-link {
            color: var(--very-dark-cyan);
            text-decoration: none;
        }

        a:hover {
            color: var(--bright-orange);
            font-style: oblique;
            font-weight: 600;
        }
    }
}

@media screen and (max-width: calc(1.6rem *2 + 919px)) {
    html {
        width: auto;
        height: auto;

        body main {
            display: flex;
            flex-wrap: wrap;
            max-width: 327px;
            height: fit-content;

            section {
                width: 100%;
                max-height: 346px;
                width: 100%;
                height: 346px;
            }
        }
    }
}