.cards-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 56px 0 32px;
}

.card-container {
    position: relative;
    border: 2px solid var(--bbh-gold);
    width: 100%;
    max-width: 320px;
    border-radius: 24px;
    margin: 32px 16px;
    padding: 48px 16px 16px;
    display: flex;
    justify-content: center;
}

.card {

}

.card-icon-container {
    position: absolute;
    top: -36px;
    border: 2px solid var(--bbh-accent);
    background-color: #e6e6fa;
    border-radius: 50%;
    padding: 16px;
}

.card-icon {
    width: 40px;
    height: 40px;
    fill: var(--bbh-gold);
}

.card-title {
    color: #ff9800;
    letter-spacing: 2px;
    font-size: 1.2em;
    text-align: center;
}

.card-description {
    margin: 4px 0;
    text-align: center;
}

.card-img-container {
    margin: 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-img-container img {
    border-radius: 16px;
}

/*-------------------------------------------------------------------------------------------------------------------*/
                             /* -- Mobile first approach using new breakpoints -- */
/*-------------------------------------------------------------------------------------------------------------------*/

@media (min-width: 375px) {}
@media (min-width: 480px) {}
@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1096px) {}
@media (min-width: 1200px) {}
@media (hover: hover) {}