#ao-container{
    width: calc(100% - var(--spacing) * 2);
    max-width: 1500px;
    margin: 0 auto;
    padding-bottom: calc(var(--spacing) * 4);
}

#ao-header{
    display: flex;
    align-items: center;
    margin-bottom: calc(var(--spacing) / 1);
}

#ao-header > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 60px;
    padding-right: var(--spacing);
    border-right: solid 1px var(--governmentGrayLight);
}

#ao-header > div:last-child {
    display: flex;
    align-items: center;
    height: 60px;
    padding-left: var(--spacing);
}

#ao-header > div:last-child > ul {
    margin-bottom: 0;
}

#ao-tabs{
    display: flex;
    justify-content: flex-start;
    margin-left: calc(var(--spacing) / 2);
    flex-wrap: nowrap;
    overflow-x: auto;
}

.ao-card{
    display: flex;
    flex-direction: column;
    border: solid 1px var(--governmentGrayLight);
    border-radius: calc(var(--spacing) / 2);
    overflow: hidden;
}

.ao-card-image{
    position: relative;
    aspect-ratio: 16 / 9;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ao-card-body{
    padding: calc(var(--spacing));
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ao-course-area{
    width: 100%;
    text-align: left;
    font-size: var(--small);
    text-transform: uppercase;
}

.ao-course-area > span{
    display: block;
    width: 50%;
    margin-top: calc(var(--spacing) / 6);
    margin-bottom: calc(var(--spacing) / 2);
    border-bottom: solid 1px var(--governmentGrayLight);
}

.ao-course-title{
    font-size: var(--large);
    font-weight: bolder;
    text-transform: uppercase;
    color: var(--governmentBlueDarker);
    text-align: left;
    line-height: 1.2;
    margin-bottom: calc(var(--spacing) / 4);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.ao-course-description{
    text-align: left;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: calc(var(--spacing) / 1);
}

.ao-course-description p{
    margin-bottom: 0;
}

.ao-course-icons{
    margin-bottom: calc(var(--spacing) / 1);
    text-align: left;
}

.ao-course-icons-row{
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) / 2);
    margin-bottom: calc(var(--spacing) / 4);
}

.ao-course-icons-row:first-child div:last-child span {
    text-transform: lowercase;
}

.ao-course-icons-row > div:first-child img {
    width: var(--spacing);
}

.ao-course-icons-row > div:last-child{
    font-size: var(--small);
}

.ao-course-inscription-availability{
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) / 2);
    margin-bottom: calc(var(--spacing) * 2);
}

.ao-course-bullet{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: calc(var(--spacing) / 4);
}

.ao-course-bullet.available{
    background-color: var(--green);
}

.ao-course-bullet.unavailable{
    background-color: var(--governmentRedDark);
}

.ao-course-availability{
    text-transform: uppercase;
}

.ao-course-cta{
    width: 100%;
    margin-top: auto;
}

@media screen and (max-width: 600px) {
    #ao-container{
        width: 100%;
    }

    #ao-header > div:first-child{
        width: 120px;
        padding-left: calc(var(--spacing) / 2);
        padding-right: calc(var(--spacing) / 2);
    }

    #ao-header > div:last-child{
        width: calc(100% - 120px);
        padding-left: 0;
        overflow-x: scroll;
    }

    .uk-subnav-pill>*, .uk-subnav>*{
        padding-left: 0;
    }

    .uk-subnav-pill>*:last-child {
        margin-right: calc(var(--spacing) / 2);
    }

    ul.js-filter li {
        width: 90%;
        margin: 0 auto;
    }
}