.fs-exercise-details-container {
    width: 84%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--fs-deep-purple);
    margin-inline: auto;
    padding: max(60px, 3.5%) clamp(10px, 3vw, 60px) clamp(15px, 2vw, 40px);
}

.fs-exercise-details-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.fs-exercise-details-title {
    width: 100%;
}

    .fs-exercise-details-title h1 {
        margin: unset;
        margin-inline: auto;
        max-width: 90%;
        text-align: center;
        color: var(--fs-white);
        font-size: clamp(30px, 6vw, 100px);
        font-weight: unset;
    }

        .fs-exercise-details-title h1:nth-child(1) {
            font-family: roboto-bold;
            font-weight: bolder;
        }

        .fs-exercise-details-title h1:nth-child(2) {
            font-family: roboto-thin;
        }

        .fs-exercise-details-title h1:nth-child(3) {
            font-family: roboto-thin;
            font-weight: bold;
            font-size: clamp(30px, 4vw, 60px);
            color: var(--fs-orange);
        }

.fs-exercise-details-description {
    width: max(260px,90%);
    font-family: roboto-light;
    font-size: clamp(18px, 2vw, 30px);
    color: var(--fs-white);
    text-align: center;
    box-sizing: border-box;
}

.fs-exercise-illustrations-container {
    display: grid;
    grid-template-columns: repeat(2,minmax(120px,1fr));
    grid-auto-rows: -webkit-min-content;
    width: 100%;
    background-color: var(--fs-white);
    padding: 0;
    gap: 1px 0;
}

.fs-exercise {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-width: 100px;
    height: 100%;
    gap: 20px;
    border-bottom: 2px solid var(--fs-deep-purple);
    padding: clamp(20px,3vw,40px) clamp(20px,5vw,100px);
}

    .fs-exercise:nth-child(odd):last-child, .fs-exercise:nth-child(odd):last-child {
        border-bottom: unset;
    }

.fs-exercise-header {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(8px,1vw,15px);
}

    .fs-exercise-header span:first-child {
        background-color: var(--fs-dark-brown);
        color: var(--fs-white);
        font-size: clamp(20px,2vw,40px);
        padding-inline: clamp(15px, .5vw,20px);
        font-family: roboto-medium;
        padding-block: 5px;
        padding-top: 10px;
    }

    .fs-exercise-header span:last-child {
        color: var(--fs-dark-brown);
        font-size: clamp(14px,3vw,45px);
        font-family: roboto-light;
        font-weight: bold;
    }

.fs-exercise-illustration {
    width: 80%;
}

.fs-exercise-footer {
    width: 100%;
    font-size: clamp(14px,2vw,25px);
    font-family: roboto-medium;
    color: var(--fs-dark-purple);
    text-align: center;
}

.fs-current-exercise-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(15px,2vw,40px);
    color: var(--fs-white);
    padding-bottom: 70px;
}

    .fs-current-exercise-container > h1 {
        font-size: clamp(25px,3vw,50px);
        color: var(--fs-orange);
        font-family: roboto-light;
    }

    .fs-current-exercise-container #exerciseImage {
        width: clamp(260px, 30%, 800px);
    }

.fs-current-exercise-progress-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    width: clamp(260px,100%,2000px);
}

.fs-current-exercise-duration {
    font-family: roboto-light;
    font-weight: bold;
    font-size: clamp(30px, 6vw, 100px);
}

.fs-current-exercise-navigation-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    font-size: clamp(16px, 2vw, 30px);
    text-align: center;
}

.fs-current-exercise-navigation-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 2vw, 40px);
}

.fs-current-exercise-elapsed-time-wrapper, .fs-current-exercise-remaining-time-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(5px, 1vw, 15px);
    width: clamp(50px,7vw,120px);
    font-family: roboto-light;
    font-size: clamp(12px, 1.5vw, 25px);
    text-align: center;
}

.fs-current-exercise-elapsed-time-play, .fs-current-exercise-elapsed-time-reset {
    width: clamp(15px,2vw,30px);
}

    .fs-current-exercise-elapsed-time-play img,
    .fs-current-exercise-elapsed-time-reset img,
    .fs-current-exercise-navigation-controls img {
        width: 100%;
    }

.excercise-img {
    min-height: 400px;
    max-height: 400px;
}


@media screen and (max-width:768px) {
    .fs-exercise-illustration {
        width: 100%;
    }

    .excercise-img {
        min-height: unset !important;
        max-height: unset !important;
    }
}