<div class="container-fluid" style="overflow: hidden;">

  <div class="row">

    <div class="col-12">

      <p class="font-custom text-white my-xl-5 my-md-4 mt-4 pt-md-4 pb-md-2 ms-xl-4 ms-md-3 text-center text-md-start">Capella di <br>San Pietro Martire</p>

    </div>

  </div>

  <div class="row">

    <div class="col-xl-3 col-md-2 text-center">

      <div class="d-md-flex justify-content-around align-items-center flex-column flex-nowrap h-100">

        <div class="d-inline-block">

          <p class="text-rotated text-white mb-4 mb-md-0">Art of the period 1566 - 1570 <br> with frescoes of Giorgio Vasari</p>

        </div>

      </div>

    </div>

    <div class="col-xl-6 col-md-8">

      <div style="filter: contrast(1.15) saturate(1.15);">

        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/new-templates/img002.jpg" alt="Musei Vaticani">

      </div>

    </div>

    <div class="col-xl-3 col-md-2 text-center">

      <div class="d-md-flex justify-content-around align-items-center flex-column flex-nowrap h-100">

        <div class="d-inline-block">

          <p class="text-rotated-2 text-white my-md-0 my-4">Open Monday - Thursday <br>from 8.30 AM to 6.30 PM</p>

        </div>

      </div>

    </div>

  </div>

  <div class="row">

    <div class="col-12">

      <p class="font-custom text-white my-xl-5 my-md-4 mb-4 pt-md-4 pb-md-3 me-xl-4 me-md-3 text-center text-md-end">Musei Vaticani</p>

    </div>

  </div>

</div>

body {

  background-color: #000;

}

.font-custom {

  font-family: 'Cinzel Decorative', cursive;

}

@media (min-width: 1026px) {

  .font-custom {

    font-size: 7rem;

  }

}

@media (min-width: 767px) and (max-width: 1025px) {

  .font-custom {

    font-size: 3rem;

  }

}

@media (min-width: 1026px) {

  .text-rotated,

  .text-rotated-2 {

    font-size: 3rem;

  }

}

@media (min-width: 767px) {

  .text-rotated {

    transform: rotate(-90deg);

    width: max-content;

  }

}

@media (min-width: 767px) and (max-width: 1025px) {

  .text-rotated,

  .text-rotated-2 {

    font-size: 1.5rem;

  }

}

@media (min-width: 767px) {

  .text-rotated-2 {

    transform: rotate(90deg);

    width: max-content;

  }

}

​