:root {
    /* corresponds to 24, 20, 18, and 16px */
    --font-size-bc-l: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
    --font-size-bc-m: clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
    --font-size-bc: clamp(1.1rem, 1rem + 0.1vw, 1.125rem);
    --font-size-bc-s: 1rem;
    --font-size-h3: clamp(1.25rem, 1rem + 1vw, 1.875rem);

    --ovt-grey--text: #7a7a7a;
    --ovt-grey--dark: #54595f;
    --ovt-grey--light: #e6e6e6;
    --ovt-grey--x-light: #f2f2f2;
    --ovt-white-bg: #fafbfd;
    --ovt-primary--200: #ace3d2;
}

.ovt-outer-tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.ovt-outer-tabs .ovt-outer-tab__headings {
    background-color: var(--ovt-grey--light);
    border-radius: 2rem;
    padding: 0.25rem;

    display: flex;
    flex-direction: row;
    gap: 0.25rem;

    width: 90%;
}

.ovt-outer-tabs .ovt-outer-tab__headings button.ovt-outer-tab__heading {
    font-size: var(--font-size-bc-l);
    line-height: 1.1em;
    font-weight: 400;

    background-color: transparent;
    border: 2px solid transparent;
    color: var(--ovt-grey--text);

    padding-block: 0.25rem 0.2rem;

    flex: 1;

    transition: all 0.4s;
}

.ovt-outer-tabs .ovt-outer-tab__headings button.ovt-outer-tab__heading:hover {
    border: 2px solid var(--ovt-primary--500);
    border-radius: 1.5rem;
}

.ovt-outer-tabs
    .ovt-outer-tab__headings
    button.ovt-outer-tab__heading[aria-selected='true'] {
    background-color: var(--ovt-primary--500);
    border: 2px solid var(--ovt-primary--500);
    border-radius: 1.5rem;
    color: var(--ovt-white-bg);
    transition: all 0.4s;
}

.ovt-outer-tabs .ovt-outer-tab__panels {
    background-color: var(--ovt-grey--x-light);
    padding: 2rem;
    width: 100%;
}

.ovt-program-tabs,
.ovt-instructor-tabs {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.ovt-program-tabs .ovt-program-tab__headings {
    width: 15%;

    display: flex;
    flex-direction: column;
}

button.ovt-inner-tab__heading {
    font-size: var(--font-size-bc);
    color: var(--ovt-grey--dark);
    background-color: transparent;
    padding-inline: 0.25rem;

    border-radius: 0;
    border-inline: 1px solid var(--ovt-grey--text);
    border-block-start: 1px solid var(--ovt-grey--text);
    border-block-end: none;
    width: 100%;

    transition: all 0.4s;

    text-align: left;
}

button.ovt-inner-tab__heading:last-child {
    border-block-end: 1px solid var(--ovt-grey--text);
}

button.ovt-inner-tab__heading:not([aria-selected='false']),
button.ovt-inner-tab__heading:hover,
button.ovt-inner-tab__heading:focus {
    background-color: var(--ovt-primary--500);
    color: var(--ovt-white-bg);
    font-weight: 600;
    font-size: var(--font-size-bc-m);
    border: 1px solid var(--ovt-primary--500);

    transition: all 0.4s;
}

.ovt-program-tab__panels,
.ovt-instructor-tab__panels {
    width: 85%;
}

.ovt-program-tab__panel:not([hidden]),
.ovt-instructor-tab__panel:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.ovt-program-tab__panel h4 {
    font-size: var(--font-size-bc);
    color: var(--ovt-primary--700);
    font-weight: 600;
}

.ovt-program__main,
.ovt-instructor__main {
    width: 70%;

    font-size: var(--font-size-bc);
}

.ovt-program__main p,
.ovt-instructor__main p {
    margin-bottom: 1rem;
    color: var(--ovt-grey--dark);
}

.ovt-program__main h3,
.ovt-instructor__main h3,
.ovt-dates-locations h3,
.ovt-pricing h3 {
    color: var(--ovt-primary--700);
    font-family: 'Hind';
    font-size: var(--font-size-h3);
    font-weight: 500;
    margin-bottom: 1rem;
}

.ovt-program__meta-section:not(:last-child) {
    margin-bottom: 1.5rem;
}

.ovt-program__meta {
    width: 28%;
    padding: 1.5rem;
    background-color: var(--ovt-grey--light);
    border-radius: 0.5rem;
    border: 1px solid var(--ovt-primary--700);

    color: var(--ovt-grey--dark);
}

.ovt-program__meta-title {
    font-weight: 600;
}

.ovt-instructor-tab__headings {
    width: 20%;
    order: 2;
}

.ovt-instructor__meta {
    width: 28%;
    order: -1;
}

.ovt-instructor__meta img {
    width: 100%;
    object-fit: cover;
    object-position: center center;
}

.ovt-dates-locations__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22%, 1fr));
    gap: 2rem;
}

.ovt-dates-locations__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ovt-dates-locations__date {
    background-color: var(--ovt-primary--200);
    font-size: var(--font-size-h3);
    line-height: 1.25em;
    padding-block: 1.25rem;
    padding-inline: 1rem;
    border-radius: 1.25rem 1.25rem 0 0;
    color: var(--ovt-grey--dark);

    flex: 1;
}

.ovt-dates-locations__location {
    background-color: var(--ovt-grey--light);
    color: var(--ovt-grey--dark);
    font-size: var(--font-size-bc);

    border: 1px solid var(--ovt-primary--700);
    border-radius: 0 0 1.25rem 1.25rem;
    padding: 1.5rem;

    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 0.75rem;
}

.ovt-dates-locations__location strong {
    font-weight: 600;
}

.ovt-pricing__item {
    display: flex;
    align-items: center;
    font-size: var(--font-size-bc-l);
    margin-bottom: 1.5rem;
}

.ovt-pricing__description {
    background-color: var(--ovt-primary--200);
    color: var(--ovt-primary--700);
    padding-inline: 1rem;
    padding-block: 0.5rem 0.35rem;

    border-radius: 0.5rem 0 0 0.5rem;
    border: 1px solid var(--ovt-primary--200);

    flex: 1;
}

.ovt-pricing__price {
    width: 10%;
    background-color: var(--ovt-grey--light);
    color: var(--ovt-primary--700);
    font-weight: 600;
    text-align: center;

    border-radius: 0 0.5rem 0.5rem 0;
    border: 1px solid var(--ovt-primary--700);

    padding-inline: 0.5rem;
    padding-block: 0.5rem 0.35rem;
}

.ovt-pricing__cta {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: var(--font-size-bc-l);
    font-weight: 600;
    font-family: 'Hind';
    color: var(--ovt-primary--700);

    margin-bottom: 1.5rem;
}

.ovt-pricing .ovt-pricing__cta .ovt-pricing__cta-btn {
    background-color: var(--ovt-primary);
    padding: 0.75rem 2rem 0.6rem;
    color: var(--ovt-white-bg);
    border: 2px solid var(--ovt-primary);
    border-radius: 4px;
    transition: all 0.3s;
    font-weight: 500;
}

.ovt-pricing .ovt-pricing__cta .ovt-pricing__cta-btn:hover {
    background-color: transparent;
    color: var(--ovt-primary);
}

.ovt-pricing__disclaimer p {
    text-align: center;
    font-size: var(--font-size-bc);
    color: var(--ovt-grey--text);
    font-weight: 400;
    font-family: 'Hind';
}

/* Responsive settings */
@media screen and (max-width: 48em) {
    .ovt-outer-tab__headings {
        flex-direction: column;
        border-radius: 1.5rem;
        padding: 0.5rem;
        width: 100%;
    }

    .ovt-outer-tab__headings button.ovt-outer-tab__heading {
        width: 100%;
        padding-block: 0.5rem;
    }

    .ovt-program-tabs,
    .ovt-instructor-tabs {
        align-items: flex-start;
        flex-direction: column;
    }

    .ovt-program-tab__headings,
    .ovt-instructor-tab__headings {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        order: -1;
    }

    .ovt-program-tab__headings button.ovt-inner-tab__heading {
        padding: 0.75rem;
        text-align: center;
        width: 50%;
    }

    .ovt-program-tab__headings
        button.ovt-inner-tab__heading:not([aria-selected='true']) {
        border-inline-start: 1px solid var(--ovt-grey--text);
        border-block-start: none;
        border-block-end: 1px solid var(--ovt-grey--text);
    }

    .ovt-program-tab__headings
        button.ovt-inner-tab__heading:nth-child(odd):not(
            [aria-selected='true']
        ) {
        border-inline-end: none;
    }

    .ovt-program-tab__headings
        button.ovt-inner-tab__heading:first-child:not([aria-selected='true']),
    .ovt-program-tab__headings
        button.ovt-inner-tab__heading:nth-child(2):not([aria-selected='true']) {
        border-block-start: 1px solid var(--ovt-grey--text);
    }

    .ovt-program-tab__panels {
        width: 100%;
    }

    .ovt-program-tab__panel:not([hidden]),
    .ovt-instructor-tab__panel:not([hidden]) {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }

    .ovt-program__main,
    .ovt-program__meta,
    .ovt-instructor__main,
    .ovt-instructor__meta {
        width: 100%;
    }

    .ovt-dates-locations__grid {
        grid-template-columns: 1fr;
    }

    .ovt-dates-locations__location {
        padding: 1rem;
    }

    .ovt-pricing__item {
        align-items: stretch;
    }

    .ovt-pricing__price {
        width: 27%;
        display: flex;
        align-items: center;
    }

    .ovt-pricing__cta {
        flex-direction: column;
        gap: 1rem;
    }
}