.body--course,
.body--coursedate {
    --bordercolor: var(--pink);
    background-color: var(--green);
    color: var(--white);
    padding-top: 5rem !important;
}

    .body--course .navbar__brand svg .back,
    .body--coursedate .navbar__brand svg .back {
        fill: var(--red);
    }

    .body--course .navbar__toggler,
    .body--course .navbar__search,
    .body--coursedate .navbar__toggler,
    .body--coursedate .navbar__search {
        display: none;
    }

.course__detail .course__image {
    background-color: var(--purple);
}

.course__detail .container {
    position: relative;
}

.course__related .subtitle {
    text-align: center;
}

@media(max-width: 991px) {
    .course__detail .container {
        padding: 0;
    }
}

.course__bg {
    background-color: var(--purple);
    padding: 4rem 2.5rem 6rem;
    margin-bottom: 6rem;
    position: relative;
}

    .course__bg:before,
    .course__bg:after {
        content: "";
        width: 100%;
        height: 5.1rem;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1322' height='51' viewBox='0 0 1322 51'%3E%3Cpolygon points='1322 0 0 0 0 51 1322 0 1322 0' fill='%2300AE44'/%3E%3C/svg%3E");
        background-size: 100% auto;
        background-repeat: no-repeat;
    }

    .course__bg:after {
        top: unset;
        bottom: 0;
        transform: scaleY(-1);
    }

.course__header {
    clip-path: polygon(0 6%, 100% 0, 100% 100%, 1% 99%);
    position: relative;
}

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

    .course__header .course__labels {
        position: absolute;
        bottom: 3rem;
        left: 0;
        width: 100%;
    }

.course__body {
    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
}

    .course__body h1 {
        margin: 0;
        display: inline-flex;
        flex-flow: column;
        align-items: center;
        position: relative;
        transform: translateY(-3rem);
    }

        .course__body h1 > span {
            padding: 1rem 1rem .5rem;
            clip-path: var(--polygon-title);
            background-color: var(--orange);
            transform: rotate(-1deg);
            position: relative;
            z-index: 1;
        }

            .course__body h1 > span:nth-child(even) {
                transform: rotate(1deg);
            }

            .course__body h1 > span + span {
                margin-top: -1.5rem;
            }

            .course__body h1 > span span {
                display: inline-block;
                transform: rotate(-1.5deg);
            }

            .course__body h1 > span:nth-child(even) span {
                transform: rotate(-.5deg);
            }

        .course__body h1 + h2 {
            font-size: 4rem;
            margin-bottom: 3rem;
            transform: translateY(-1rem);
        }

        .course__body h1 + h2 > span {
            padding: 1rem 1rem .5rem;
            clip-path: var(--polygon-title);
            background-color: var(--white);
            color: var(--purple);
            transform: rotate(-1deg);
            position: relative;
            z-index: 1;
        }

    .course__body .course__features {
        font-size: 1.6rem;
        line-height: 1.5;
        margin-bottom: 4rem;
        transform: rotate(-.5deg);
    }

        .course__body .course__features li + li:before {
            content: none;
        }

.course__dates {
    margin-top: 4rem;
}

.course__detail h2 {
    display: inline-flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-bottom: 4rem;
    transform: rotate(1deg);
}

    .course__detail h2 > span {
        display: inline-flex;
        background-color: var(--pink);
        padding: 1rem 1.5rem .5rem;
        margin-bottom: .5rem;
        clip-path: var(--polygon-title);
        position: relative;
        z-index: 1;
    }

        .course__detail h2 > span span {
            transform: rotate(-1.5deg);
        }

        .course__detail h2 > span:nth-child(even) span {
            transform: rotate(-.5deg);
        }

.course__detail .richtext a:not(.button) {
    background-image: linear-gradient(var(--white), var(--white));
}

.course__body .course__description {
    transform: rotate(-.5deg);
}

.course__dates,
.course__subscribe,
.course__location,
.course__teachers,
.course__related {
    margin-top: 4rem;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 4rem;
}

.course__schedule {
    margin-top: 8rem;
    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
}

.course__schedule table {
    width: 100%;
    max-width: 76rem;
    margin: 0 auto;
    text-align: left;
    border-spacing: 0;
}

    .course__schedule table th {
        font-weight: 500;
    }

    .course__schedule table th,
    .course__schedule table td {
        padding: 1.6rem 0;
        border-bottom: .1rem solid rgba(255, 255, 255, .25);
    }

        .course__schedule table .date--past td {
            opacity: .5;
        }

    .course__schedule p {
        font-size: 1.6rem;
        line-height: 2.5rem;
        margin-top: 4rem;
    }

    .course__subscribe {
        display: flex;
        flex-flow: column;
        align-items: center;
        text-align: center;
    }

    .course__subscribe h4 {
        margin-bottom: 1.5rem;
        transform: rotate(-1deg);
    }

    .course__subscribe .button {
        margin-bottom: 4rem;
    }

        .course__subscribe .button:has(+.course__full) {
            margin-bottom: 0;
        }

    .course__subscribe .course__full {
        font-size: 1.6rem;
        margin-bottom: 4rem;
    }

.location {
    display: flex;
    flex-flow: column;
}

.location__image {
    background-color: var(--orange);
    clip-path: polygon(0 4%, 100% 0, 100% 100%, 1% 95%);
    padding: 2rem;
    margin-bottom: 2rem;
}

    .location__image img {
        width: 100%;
        height: auto;
        clip-path: polygon(0 3%, 98% 0, 100% 100%, 1% 97%);
    }

.location__text {
    text-align: center;
}

    .location__text h4 {
        margin-bottom: 2rem;
        transform: rotate(1deg);
    }

    .location__text p {
        transform: rotate(1deg);
    }

.teachers {
    --gap: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.teacher__image {
    background-color: var(--orange);
    clip-path: polygon(0 0, 97% 0, 100% 100%, 3% 97%);
    padding: 2.5rem 3rem 2.5rem;
    margin-bottom: 4rem;
}

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

.teacher:nth-child(even) .teacher__image {
    clip-path: polygon(0 3%, 100% 1%, 97% 100%, 4% 100%);
    padding-top: 3rem;
    padding-bottom: 2rem;
    margin-top: .5rem;
    margin-bottom: 3.5rem;
}

.teacher__text h3 {
    margin-bottom: 1.5rem;
}

@media(max-width: 991px) {
    .course__body .course__features {
        flex-flow: column;
    }

        .course__body .course__features li {
            margin-right: 0;
        }

            .course__body .course__features li + li {
                padding-left: 0;
            }

    .course__body .large p {
        font-size: 1.6rem;
        line-height: 1.5;
    }
}

@media(min-width: 992px) {
    .body--course .button--close {
        right: 0;
    }

    .course__bg {
        padding: 4rem 2.5rem 7rem;
    }

    .course__header .course__labels {
        bottom: 6rem;
        gap: 1rem;
    }

    .course__header .course__label {
        font-size: 3.2rem;
        padding: .6rem 1.5rem .4rem;
    }

    .course__body h1 {
        font-size: 10.4rem;
        padding: 1.75rem 2.5rem .5rem 2.5rem;
        transform: translateY(-7rem);
    }

        .course__body h1 > span {
            padding: 1.5rem 2.5rem .5rem;
        }

            .course__body h1 > span span {
                transform: rotate(-.5deg);
            }

        .course__body h1 + h2 {
            font-size: 8rem;
            margin-bottom: 0;
            transform: translateY(-6rem);
        }

            .course__body h1 + h2 > span {
                transform: rotate(-2deg);
                padding-left: 2rem;
                padding-right: 2rem;
            }

            .course__body .course__features {
                justify-content: center;
                font-size: 2rem;
                transform: rotate(.5deg);
                margin-bottom: 5rem;
            }

        .course__body .course__features li {
            margin-bottom: .3rem;
        }

        .course__body .course__features li + li {
            padding-left: 2.4rem;
        }

    .course__body .course__features,
    .course__body .course__description {
        max-width: 66.66666667%;
    }

    .body--coursedate .course__body .course__features {
        max-width: 83.33333333%;
    }

    .course__dates,
    .course__subscribe,
    .course__location,
    .course__teachers,
    .course__related {
        max-width: 83.33333333%;
        margin-top: 8rem;
        padding-bottom: 4rem;
    }

    .course__detail h2 {
        margin-bottom: 8rem;
    }

    .course__subscribe h4 {
        margin-bottom: 1.5rem;
        transform: rotate(-1deg);
    }

    .course__subscribe .button {
        margin-bottom: 4rem;
    }

    .course__subscribe p {
        font-size: 1.6rem;
        line-height: 2.4rem;
    }

    .location {
        flex-flow: row;
    }

    .location__image {
        min-width: 60rem;
    }

    .location__text {
        padding: 0 0 0 3rem;
        display: flex;
        flex-flow: column;
        justify-content: center;
        text-align: left;
    }

    .course__teachers {
        width: 66.66666666667%;
    }

    .teachers {
        --gap: 3rem;
    }

    .teacher {
        width: calc(50% - (var(--gap) / 2));
    }
}