/* Fonts */
@import url(https://fonts.bunny.net/css?family=ibm-plex-mono:400,400i,600i|lacquer:400|noto-serif:300i);

/* Colors */
:root {
    --cream: rgb(245, 245, 242);
    --lightest-blue: rgb(231, 243, 255);
    --mid-blue: rgb(218, 236, 255);
    --dusk-blue: rgb(133, 159, 184);
    --dark-blue: rgb(53, 64, 81);
    --darkest-blue: rgb(15, 20, 27);
    --highlight: rgb(150, 14, 100);
    --gold: rgb(178, 142, 24);
    --display: "Lacquer", display;
    --serif: "FK Roman Standard", "Noto Serif", serif;
    --sans: "FK Grotesk Mono", 'IBM Plex Mono', 'Courier New', 'Courier', monospace;
}

.home main {
    section {
        margin: 0 auto;

        &.full-width {
            width: 100vw;
        }

        &.block-width {
            width: 70vw;
        }
    }

    .mission {
        background-image: url("../img/mission.png");
        background-repeat: no-repeat;
        background-position: 50% 0;
        background-size: 80% auto;
        padding-top: clamp(16rem, 15.135rem + 4.324vw, 20rem);
        position: relative;
        margin-bottom: 10rem;
        p {
            font-family: var(--sans);
            text-transform: uppercase;
            text-align: center;
            font-size: 1.3rem;
        }

        &:after {
            content: "";
            background-image: url("../img/chain.png");
            background-repeat: no-repeat;
            background-position: center center;
            position: absolute;
            height: 10rem;
            width: 100%;
        }
    }

    .homepage-media {
        margin: 2rem auto;
    }

    .features {
        background-image: url("../img/bg-features.png");
        padding: 16rem 1rem 2rem;

        @media (min-width:600px) {
            padding: 13rem 3rem 2rem;
        }

        text-align: center;
        position: relative;

        &::after {
            content: "";
            background-image: url("../img/bg-features-top.png");
            background-repeat: no-repeat;
            height: 216px;
            width: 100vw;
            position: absolute;
            top: 0;
            left: 0;
        }

        h2 {
            font-family: var(--display);
            font-size: clamp(1.75rem, 1.48rem + 1.351vw, 3rem);
            text-transform: none;
            margin-top: 2rem;
        }

        .intro {
            margin: 1rem auto;
        }

        .featured-items {
            @media screen and (max-width: 799px) {
                padding: 0 1rem 2rem;
            }

            @media screen and (min-width: 600px) {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 0 1rem;
            }

            @media screen and (min-width: 800px) {
                /*grid-template-rows: repeat(6, 1fr);*/
                grid-template-columns: repeat(3, 1fr);
            }

            &>div.item {
                background-color: var(--cream);
                position: relative;
                border-radius: 4px;
                padding: 1rem;
                text-transform: uppercase;
                margin-bottom: 1rem;
                display: flex;
                flex-direction: column;
                text-align: left;

                img {
                    text-align: center;
                    margin-top: 1rem;
                    width: 100%;
                    height: auto;
                }

                h3 {
                    margin-top: 0;
                }

                &:before {
                    content: "";
                    background-color: var(--gold);
                    border-radius: 4px 0 0 4px;
                    height: 2rem;
                    width: 4px;
                    display: block;
                    position: absolute;
                    left: -4px;
                    top: 0;
                }
                a,
                a[href] {
                    border-bottom-width: 0;
                }

            }

            @media screen and (min-width: 800px) {
                .item:nth-child(1) {
                    grid-area: 2 / 1 / 4 / 2;
                }

                .item:nth-child(2) {
                    grid-area: 5 / 1 / 7 / 2;
                }

                .item:nth-child(3) {
                    grid-area: 1 / 2 / 3 / 3;
                }

                .item:nth-child(4) {
                    grid-area: 4 / 2 / 6 / 3;
                }

                .item:nth-child(5) {
                    grid-area: 2 / 3 / 4 / 4;
                }

                .item:nth-child(6) {
                    grid-area: 5 / 3 / 7 / 4;
                }
            }
        }
    }

    .listening-wall {
        background-color: var(--dark-blue);
        color: var(--lightest-blue);
        font-family: var(--serif);
        margin: 0 auto;
        padding-top: 20rem;
        position: relative;
        text-align: center;

        &::before {
            content: "";
            background-image: url("../img/bg-features-bottom.png");
            background-repeat: no-repeat;
            height: 242px;
            width: 100vw;
            position: absolute;
            top: 0;
            left: 0;
        }

        blockquote {
            background-image: url("../img/pullquote.png");
            background-repeat: no-repeat;
            background-position: 50% bottom;
            padding-bottom: 3rem;
            font-family: var(--serif);
            font-size: 3.125rem;
            width: 70vw;
            max-width: 75.625rem;
            margin: 0 auto;

            &+.attribution {
                font-family: var(--display);
                font-size: 2.8125rem;
            }
        }

        .attribution {
            color: var(--dusk-blue);
        }

        .media-block {
            background-color: var(--dusk-blue);
            width: 70vw;
            margin: 2rem auto;

            h3 {
                font-family: var(--display);
            }
        }
    }

    .homepage-news {
        margin: 2rem auto;

        .home-news-head {
            display: flex;
            justify-content: space-between;

            h2 {
                font-family: var(--serif);
                text-align: center;
                text-transform: none;
                margin: 0
            }

            p {
                margin: 0;
            }
        }

        .wrapper {
            font-family: var(--sans);
            display: grid;
            gap: 1rem;
            background-color: var(--cream);
            position: relative;
            padding: 1rem;
            margin-top: 1rem;
            grid-template-columns: 1;

            @media screen and (min-width: 600px) {
                grid-template-columns: repeat(2, 1fr);
            }

            @media screen and (min-width: 800px) {
                grid-template-columns: repeat(5, 1fr);

            }

            grid-auto-rows: minmax(150px, auto);

            article {
                font-size: clamp(1rem, 0.973rem + 0.135vw, 1.125rem);

                a,
                a[href] {
                    display: block;
                    border-bottom-width: 0;

                    &:hover,
                    &:active {
                        color: var(--highlight; )
                    }
                }

                img {
                    width: 100%;
                    height: auto;
                }
            }

            &:before {
                content: "";
                background-color: var(--gold);
                border-radius: 4px 0 0 4px;
                height: 2rem;
                width: 4px;
                display: block;
                position: absolute;
                left: -4px;
                top: 0;
            }
        }
    }
}