#experience {
    --btn-height: 36px;
    --divider-spacer: 60px;
    @media (max-width: 769px) {
        --divider-spacer: 40px;
    }
    #header {
        margin: 40px 0 var(--divider-spacer);
        > .pbds-container {
            display: grid;
            grid-template-columns: 45% 1fr;
            grid-template-areas: "breadcrumbs spacer" "header spacer" "content aside";
            column-gap: 206px;
            .pbds-breadcrumbs {
                grid-area: breadcrumbs;
                margin: 0 0 6px;
            }
            header {
                grid-area: header;
                h1 {
                    margin: 0 0 2px;
                }
            }
            .content {
                grid-area: content;
                margin: 40px 0 0;
            }
            aside {
                grid-area: aside;
                > span {
                    margin: 0 0 16px;
                    display: block;
                    font-weight: 700;
                }
                li {
                     margin: 0 0 10px;
                }
            }
            @media (max-width: 769px) {
                grid-template-columns: 100%;
                grid-template-areas: "breadcrumbs" "header" "content" "aside";
            }
        }
    }
    #intro {
        .video--wrapper {
            width: 100%;
            max-width: 732px;
            margin: 0 auto;
            p {
                max-width: 480px;
                margin: 0 auto 20px;
                text-align: center;
            }
            button {
                display: block;
                aspect-ratio: 733 / 413;
            }
        }
    }
    .pbds-section--content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "media content";
        gap: 60px;
        .media {
            grid-area: media;
            width: 100%;
            aspect-ratio: 736 / 495;
            border-radius: 5px;
            overflow: hidden;
            > img {
                width: 100%;
                height: 100%;
                display: block;
            }
        }
        .content {
            grid-area: content;
            align-self: center;
            h2 {
                margin: 0 0 20px;
            }
        }
        @media (max-width: 769px) {
            grid-template-columns: 100%;
            grid-template-areas: "media" "content" !important;
        }
    }
    section:nth-of-type(odd) {
        .pbds-section--content {
            grid-template-areas: "content media";
        }
    }
}
.pbds-footer {
    margin-top: 60px;
}