.c-banner {
    width: 100%;
}

.c-banner img {
    height: 30rem;
    width: 100%;
    object-fit: cover;
    object-position: bottom;
}

.c-principal-locales {
    padding-inline: 15rem;
    padding-block: 5rem;
}

.c-mapa-locales {
    display: flex;
    gap: 30px;
}

.c-mapa {
    flex: 1;
}

.c-mapa iframe {
    width: 100%;
    height: 100%;
}



.c-tarjetas-locales {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;

    padding: 10px;
}

.c-tarjetas-locales>div {
    padding: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    gap: 10px;
    border-radius: 2px;
    box-shadow: 0px 1px 4px #0000006a;
}

.c-tarjetas-locales>div>img {
    position: absolute;
    top: -20px;
    right: -5px;
}

.c-tarjetas-locales>div>h2 {
    font-size: var(--fuente-subtitulo);
}

.c-tarjetas-locales>div>p {
    font-size: var(--fuente-texto);
}

@media screen and (max-width: 1024px) {

    .c-principal-locales {
        padding-inline: 8rem;
    }

    .c-tarjetas-locales {
        padding: 0px;
    }

    .c-tarjetas-locales>div>img {
        top: -12px;
        right: -3px;
        width: 81px;
        z-index: -1;
    }
}

@media screen and (max-width: 768px) {
    .c-mapa-locales {
        flex-direction: column-reverse;
    }

    .c-mapa iframe {
        height: 30rem;
    }

    .c-banner img {
        height: 15rem;
    }
}

@media screen and (max-width: 425px) {
    .c-principal-locales {
        padding-inline: 3rem;
    }

    .c-mapa iframe {
        height: 20rem;
    }

    .c-tarjetas-locales>div>img {
        top: -7px;
        right: 0px;
        width: 50px;
    }

    .c-banner img {
        height: 11rem;
    }
}