:root {
    --amenities-padding: 0;
    --amenities-img-br: 25px;
    --amenities-font-size: 18px;
    --amenities-font-weigth: 300;
    --amenities-icon-height: 220px;
    --amenities-margin-bottom: 10px;
    --amenities-amenity-padding: 10px;
    --amenities-title-font-size: 32px;
    --amenities-title-font-weigth: 400;
    --amenities-title-margin: 0 0 20px;
    --amenities-block-width: calc(100%/5 - 20px);
}

.amenities__title {
    font-weight: var(--amenities-title-font-weigth);
    font-size: var(--amenities-title-font-size);
    margin: var(--amenities-title-margin);
    text-align: center;
}

.amenities__block {
    margin-bottom: var(--amenities-margin-bottom);
    padding: var(--amenities-padding);
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
}

.amenities__block > .amenity {
    padding: var(--amenities-amenity-padding);
    width: var(--amenities-block-width);
    flex-direction: column;
    justify-content: start;
    display: flex;
}

.amenities__block > .amenity > img {
    margin-bottom: var(--amenities-margin-bottom);
    border-radius: var(--amenities-img-br);
    height: var(--amenities-icon-height);
    object-fit: cover;
    width: 100%;
}

.amenities__block > .amenity > p {
    font-weight: var(--amenities-font-weigth);
    font-size: var(--amenities-font-size);
    white-space: break-spaces;
    text-align: center;
    margin: 0;
}

@media only screen and (max-width:1280px) {
    :root {
        --amenities-padding: 0 20px;
    }
}

@media only screen and (max-width:1100px) {
    :root {
        --amenities-block-width: calc(100%/4 - 20px);
    }
}

@media only screen and (max-width:860px) {
    :root {
        --amenities-block-width: calc(100%/3 - 20px);
    }
}

@media only screen and (max-width:680px) {
    :root {
        --amenities-block-width: calc(100%/2 - 20px);
    }
}

@media only screen and (max-width:350px) {
    :root {
        --amenities-block-width: calc(100% - 20px);
    }
}