@media screen and (max-width: 1200px) {
    #container {
        flex: 0 0 100%;
    }

    #aside {
        flex: 0 0 100%;
    }

    .card-1 {
        flex: 0 0 50%;
    }

    .col-1,
    .col-2 {
        margin-bottom: 30px;
        flex: 0 0 50%;
        width: auto;
        max-width: 50%;
    }
}

@media screen and (max-width: 1024px) {
    #container {
        flex: 0 0 100%;
    }

    #aside {
        flex: 0 0 100%;
    }

    .card-1 {
        flex: 0 0 50%;
    }

    .col-1,
    .col-2 {
        margin-bottom: 30px;
        flex: 0 0 50%;
        width: auto;
        max-width: 50%;
    }
}

@media screen and (max-width: 768px) {
    .card-1 {
        flex: 0 0 100%;
    }

    .card-3 {
        flex: 1 0 50%;
    }

    .col-1,
    .col-2 {
        margin-bottom: 30px;
        flex: 0 0 50%;
        width: auto;
        max-width: 50%;
    }
}

@media all and (max-width: 576px) {
    .wrapper {
        margin: auto;
    }

    nav {
        margin-left: -15px;
        margin-right: -15px;
    }

    .nav-content {
        flex-wrap: wrap;
        width: auto;
        align-items: center;
        font-size: 1.1rem;
    }

    .nav-content .logo-nav {
        flex: 0 0 50%;
        order: 1;
    }

    .nav-content .hebergements {
        border-top: none;
        color: #0065fc;
        order: 3;
        border-bottom: 2px solid #0065fc;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 15px;
        flex: 0 0 50%;
    }

    .nav-content .activites {
        border-top: none;
        flex: 0 0 50%;
        order: 4;
        border-bottom: 2px solid #eee;
        padding-top: 10px;
        padding-bottom: 15px;
        text-align: center;
    }

    .nav-content .activites a {
        color: #444;
    }

    .nav-content .inscrire {
        border-top: none;
        flex: 0 0 50%;
        order: 2;
        text-align: right;
    }

    .nav-content .inscrire a {
        color: #0065fc;
    }

    #head-title h1 {
        margin-top: 15px;
        margin-bottom: 10px;
        font-size: 1.5rem;
    }

    #head-title h2 {
        margin-top: 0;
        font-size: 1.1rem;
    }

    .search-box form .inner-form {
        border: 2px solid #f2f2f2;
        border-radius: 20px;
    }

    .search-box form .inner-form .input-field input {
        height: 100%;
        background: white;
        border: 0;
        padding: 10px 0 10px 20px;
    }

    .search-box form .inner-form .input-field.second-wrap .btn-search {
        display: none;
    }

    .search-box form .inner-form .input-field.second-wrap .btn-search.mobile {
        display: block;
    }

    .cards {
        margin: 0;
        border-radius: 0;
    }

    section {
        flex-wrap: nowrap;
        flex-direction: column-reverse;
    }

    #container {
        flex: 0 0 100%;
        margin-top: 20px;
    }

    #container h2 {
        margin-left: 20px;
        font-size: 1.6rem;
    }

    #container .cards {
        background-color: transparent;
    }

    #aside {
        flex: 0 0 100%;
    }

    #aside h2 {
        margin-left: 20px;
        font-size: 1.6em;
        width: 100%;
    }

    .filters > span {
        display: block;
        padding-bottom: 15px;
    }

    .card {
        flex: 0 0 100%;
        width: auto;
    }

    .card_horizontal .card-left-img {
        width: 155px;
        height: 150px;
    }

    .card_horizontal .card-body {
        padding: 15px 0 0 10px;
    }

    .card_horizontal,
    .card_img {
        border-radius: 1rem;
    }

    .card_img img {
        border-top-right-radius: 1rem;
        border-top-left-radius: 1rem;
    }

    .card_horizontal .card-left-img img {
        width: 100%;
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
        height: 150px;
    }

    .card-3 {
        margin-right: 0;
        margin-left: 0;
    }

    #activites .col-1,
    #activites .col-2 {
        max-width: 100%;
    }

    .col-2 .card:first-child {
        margin-bottom: 0;
    }

    .card_2-3 {
        margin-bottom: 0;
        height: auto;
    }

    #activites {
        padding-right: 3px;
        margin-bottom: 0;
        padding-top: 0;
        max-width: initial;
    }

    #activites .line {
        margin-right: 0;
        margin-left: 0;
        display: block;
    }

    #activites h2 {
        margin-left: 30px;
        font-size: 1.6em;
    }

    #activites .col-1 .card,
    #activites .col-2 .card {
        margin-top: 15px;
        margin-bottom: 0;
        height: 200px;
    }

    #activites img {
        height: 150px !important;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }

    #activites h3 {
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 0;
        padding-left: 10px;
    }

    #footer .col {
        flex: 1 0 100%;
    }
}

@media screen and (max-width: 320px) {
    #head-title h1 {
        font-size: 1.1rem;
    }

    #head-title h2 {
        font-size: 1rem;
    }

    .search-box form .inner-form {
        border: 2px solid #f2f2f2;
        border-radius: 20px;
    }

    .search-box form .inner-form .input-field input {
        border: 0;
    }

    .search-box form .inner-form .input-field {
        height: 47px;
    }

    .search-box form .inner-form .input-field.second-wrap .btn-search {
        height: 100%;
        font-size: 20px;
        color: #fff;
        border: 0;
        cursor: pointer;
        background: #0065fc;
        padding: 0 20px 0 20px;
    }

    .filter-button {
        font-size: 1rem;
    }

    .info-button {
        font-size: 15px;
    }

    #aside h2 {
        font-size: 1.3rem;
    }

    .card_horizontal,
    .card_img {
        border-radius: 2rem;
    }

    .card_horizontal .card-left-img img {
        border-top-left-radius: 2rem;
        border-bottom-left-radius: 2rem;
        height: 150px;
    }

    #container h2 {
        font-weight: bold;
        margin-left: 20px;
        font-size: 1.3rem;
    }

    .card_img img {
        border-top-right-radius: 2rem;
        border-top-left-radius: 2rem;
    }
}