/* <div class="banner-wrapper" style="background-image: url('https://emel.myshoptet.com/user/documents/upload/Protetika/Banner/Veľkostné tabulky.png');">
  <div class="banner-content">
    <h2>Správna veľkosť obuvi</h2>
        <a href="https://emel.myshoptet.com/velkostne-tabulky-obuvi/"  class="btn btn-primary">Viac info</a>
  </div>
</div> */


.banner-wrapper {
    height: 320px;
    background-size: cover;
    background-position: center;
}

.banner-wrapper h2 {
    margin-bottom: 15px;
    color: white;
    font-family: Arial;
    font-size: 36px;
}

.btn.btn-primary {
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 5px;
    color:  black;
    font-weight: bold;
    z-index: 5;
}
/* Text v top right bannery */

.banner-content {
    position: relative;
    z-index: 1;
    text-align: left; /* Text zarovnaný doľava */
    max-width: 90%; /* Obmedzená šírka textu pre lepšiu čitateľnosť */
    padding-left: 100px;
    padding-bottom: 50px;
}

@media screen and (max-width: 1024px) {
    .banner-content {
        position: relative;
        z-index: 1;
        text-align: left; /* Text zarovnaný doľava */
        max-width: 90%; /* Obmedzená šírka textu pre lepšiu čitateľnosť */
        padding-left: 50px;
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 767px) {
    .banner-content {
        position: relative;
        z-index: 1;
        text-align: left; /* Text zarovnaný doľava */
        max-width: 90%; /* Obmedzená šírka textu pre lepšiu čitateľnosť */
        padding-left: 73px;
        padding-bottom: 20px;
    }

    .banner-wrapper {
        min-height: 320px;
    }

    .banner-wrapper h2 {
        font-size: 30px;
    }
}