﻿.retailers__wrapper h1, p.retail-headlineLabel {
    text-align: center;
    font-family: var(--primary-font-family);
}

.retailers__wrapper h1 {
    margin-bottom: 2rem;
}

.retailers__wrapper h3 {
    font-size: 20px;
}

.retailers__countries {
    text-align: center;
    max-width: 893px;
    margin: auto;
    margin-bottom: 110px;
}

.retailers__line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 0;
}

.retailers__item {
    display: inline-flex;
    align-items: center;
    color: var(--primary-font-color);
    font-size: 19px;
    font-family: var(--primary-font-family);
    text-decoration: none;
    margin-right: -15px;
}

    .retailers__item::before,
    .retailers__item::after {
        content: "|";
        color: #000;
        font-size: 19px;
        padding: 0 4px;
    }

    .retailers__item:hover {
        color: var(--tertiary-font-color);
    }



.retailer-location {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 60px;
}

.country-personell, .country-locations {
    margin-bottom: 60px;
}

.retailerCountry__wrapper {
    margin-bottom: 100px;
}

.country-personell {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.retailer-card p {
    margin-bottom: 0px;
}

    .retailer-card p.retailer-name {
        font-family: var(--primary-font-family);
        font-size: 19px;
    }

p.retailer-type {
    color: var(--image-description-font-color);
}

.retailersContainer {
    margin-top: 195px;
}

.retailerCountry__wrapper.is-hidden {
    display: none;
}

@media(max-width: 768px) {
    .retailersContainer {
        margin-top: 155px;
    }

    .retailer-location {
        grid-template-columns: repeat(2, 1fr);
    }

    .retailer-location > *,
    .country-personell > * {
        min-width: 0;
    }

    .retailer-card,
    .retailer-card a,
    .retailer-card p {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .retailerCountry__wrapper h1, .retailerCountry__wrapper h2, .retailerCountry__wrapper h3, .retailerCountry__wrapper h4, .retailerCountry__wrapper h5, .retailerCountry__wrapper h6 {
        text-align: left;
    }

    .retailer-card p.retailer-name {
        font-size: 16px;
    }

    .retailers__line {
        margin-left: -15px;
    }

    .retailerCountry__wrapper h2 {
        margin-bottom: 1rem;
        border-bottom: 1px solid #3a3a3a;
    }
}
