.dataset-resources {
    display: flex;
    background: var(--lighter-grey);

    @media (--md-down) {
        align-items: center;
        flex-direction: column;
        padding: 60px 20px 0;
    }

    @media (--lg-up) {
        flex-direction: row;
        padding-top: 100px;
        padding-inline-start: calc(
            (100vw - var(--desktop-width)) / 2 + var(--page-margin)
        );
    }

    nav {
        position: sticky;
        background: var(--lighter-grey);

        @media (--md-down) {
            top: 0;
            margin-bottom: 30px;
            padding-bottom: 10px;
            z-index: var(--middle-z-index);
            overflow: auto;
        }

        @media (--lg-up) {
            top: 100px;
            margin-inline-end: 115px;
            max-width: 210px;
            height: 100%;
        }

        ul {
            list-style: none;

            @media (--md-down) {
                display: flex;
                flex-direction: row;
            }
        }

        li {
            font-weight: 600;
            opacity: 0.5;

            @media (--md-down) {
                margin-inline-end: 20px;

                &:last-child {
                    margin-inline-end: 0;
                }
            }

            @media (--lg-up) {
                margin-bottom: 30px;
                font-family: var(--strong-font-family);
                font-size: var(--font-size-lg);
            }

            &.active {
                opacity: 1;

                .line {
                    background-image: linear-gradient(
                        to right,
                        var(--gradient-pink),
                        var(--gradient-purple)
                    );
                }
            }

            .line {
                margin-bottom: 10px;
                height: 3px;
            }
        }
    }

    .sections {
        max-width: 760px;
        width: 100%;
    }

    section {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;

        @media (--md-down) {
            margin-bottom: 20px;
        }

        @media (--lg-up) {
            margin-bottom: 40px;
        }
    }

    .box {
        width: 100%;
        max-width: 370px;

        @media (--md-down) {
            margin-bottom: 30px;
        }

        @media (--lg-up) {
            margin-bottom: 60px;
        }

        .dots-and-content {
            display: flex;
            flex-direction: row;
        }

        .dots {
            margin-inline-end: 15px;
            width: 40px;
            flex-shrink: 0;
        }

        .content {
            padding-inline-end: 45px;
            padding-bottom: 40px;
        }

        h2 {
            font-size: var(--font-size-lg);
            font-weight: 600;
        }

        p {
            line-height: 1.5;
            color: var(--near-black);
        }
    }

    .get-started {
        img {
            width: inherit;
        }

        .content {
            margin-top: 35px;
        }

        h2 {
            margin-bottom: 20px;
        }
    }

    .other-datasets {
        @media (--lg-up) {
            margin-bottom: 40px;
        }
    }

    .other-dataset {
        position: relative;

        .dataset-banner {
            margin-bottom: 65px;
            height: 85px;
            opacity: 0.2;
            z-index: 0;
        }

        img {
            border: 5px solid white;
            border-radius: 5px;
            width: 80px;
            height: 80px;
            position: absolute;
            top: 45px;
            z-index: 1;
            inset-inline-start: 50px;
            background: white;
        }

        h2 {
            margin-bottom: 10px;
        }

        p {
            margin-bottom: 15px;
        }

        ul {
            margin: 0 0 30px;
            list-style: none;
        }

        li {
            border-top: 1px solid var(--lighter-grey);
            padding: 15px 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            .label {
                text-transform: uppercase;
                font-size: var(--font-size-xs);
                font-weight: 600;
                color: var(--warm-grey);
            }
        }

        .buttons {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .button {
            border: none;
            padding: 15px 30px;
            min-width: auto;
        }

        .download {
            background: var(--blue);
            color: white;
        }
    }

    .feedback {
        max-width: initial;

        img {
            width: 100%;

            @media (--md-down) {
                margin-bottom: 30px;
            }

            @media (--lg-up) {
                margin-bottom: 60px;
            }
        }

        .content {
            width: 100%;
        }

        .described-button {
            display: flex;

            @media (--md-down) {
                flex-direction: column;
            }

            @media (--lg-up) {
                flex-direction: row;
                justify-content: space-between;
            }

            &:first-child {
                margin-bottom: 30px;
            }

            p {
                margin-bottom: 20px;
                max-width: 350px;
            }

            a {
                max-height: 57px;
            }
        }
    }
}
