/* index CSS */

.index {
    padding-top: 65px;
}

.index__breadcrumb {
    line-height: 1.5;
    margin-bottom: 20px;
}

.index__title {
    margin-bottom: 20px;
}

.index__tag {
    margin-bottom: 40px;
}

.index__locations {
    display: flex;
    flex-wrap: wrap;
    margin: 80px 0;
}

.index__locations__county {
    margin: 0 20px 40px 0;
    width: 270px;
}

@media only screen and (max-width: 1800px) {
    
    .index__locations {
        column-gap: 20px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        margin: 80px 0;
        row-gap: 40px;
    }
    
    .index__locations__county {
        margin: 0;
        width: auto;
    }
}

@media only screen and (max-width: 1350px) {
    
    .index__locations {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media only screen and (max-width: 1100px) {
    
    .index__locations {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width: 750px) {
    
    .index__locations {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 480px) {
    
    .index__locations {
        display: block;
    }

    .index__locations__county {
        text-align: center;
        margin-bottom: 40px;
    }
}