/* Teléfonos móviles pequeños */
@media (max-width: 575px) {

  .row-1 a:first-child {
    margin-right: 0px;
  }

  .row-1 {
    padding-left: 0px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .row-2 {
    padding-right: 0px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .row-2 a:first-child {
    margin-right: 0px;
  }

  .row-3 {
    padding-right: 0px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .row-3 a:first-child {
    margin-right: 0px;
  }

  .modal-content .title-modal p {
    font-size: 1.4rem;
  }

  .modal-info p {
    font-size: 2.1rem;
  }

  .info-title p {
    font-size: 1.2rem;
  }

  .anteriores h1 {
    font-size: 2.2rem;
  }

  .top-image img{
    height: 50dvh;
  }

  :root{
    --hero-height: clamp(350px, 50vh, 800px);
  }

}

/* Teléfonos móviles grandes y tabletas pequeñas */
@media (min-width: 576px) and (max-width: 767px) {

  .row-1 a:first-child {
    margin-right: 0px;
  }

  .row-1 {
    padding-left: 0px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .row-2 {
    padding-right: 0px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .row-2 a:first-child {
    margin-right: 0px;
  }

  .row-3 {
    padding-right: 0px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .row-3 a:first-child {
    margin-right: 0px;
  }

  .modal-content .title-modal p {
    font-size: 1.5rem;
  }

  .modal-info p {
    font-size: 2.2rem;
  }

  .info-title p {
    font-size: 1.3rem;
  }

  .anteriores h1 {
    font-size: 2.5rem;
  }

  .top-image img{
    height: 60dvh;
  }

  :root{
    --hero-height: clamp(450px, 55vh, 800px);
  }

}

/* Tabletas */
@media (min-width: 768px) and (max-width: 991px) {

  .row-1 a:first-child {
    margin-right: 20px;
  }

  .row-1 {
    padding-left: 90px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-2 {
    padding-right: 45px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-2 a:first-child {
    margin-right: 20px;
  }

  .row-3 {
    padding-right: 90px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-3 a:first-child {
    margin-right: 20px;
  }

  .modal-content .title-modal p {
    font-size: 1.5rem;
  }

  .modal-info p {
    font-size: 2.2rem;
  }

  .info-title p {
    font-size: 1.3rem;
  }

  .anteriores h1 {
    font-size: 3.0rem;
  }

  .top-image img{
    height: 70dvh;
  }

  :root{
    --hero-height: clamp(550px, 55vh, 800px);
  }

}

/* Portátiles y escritorios pequeños */
@media (min-width: 992px) and (max-width: 1199px) {

  .row-1 a:first-child {
    margin-right: 20px;
  }

  .row-1 {
    padding-left: 90px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-2 {
    padding-right: 45px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-2 a:first-child {
    margin-right: 20px;
  }

  .row-3 {
    padding-right: 90px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-3 a:first-child {
    margin-right: 20px;
  }

  .modal-content .title-modal p {
    font-size: 1.7rem;
  }

  .modal-info p {
    font-size: 2.5rem;
  }

  .info-title p {
    font-size: 1.5rem;
  }

  .anteriores h1 {
    font-size: 3.2rem;
  }

  .top-image img{
    height: 80dvh;
  }

  :root{
    --hero-height: clamp(650px, 60vh, 800px);
  }

}

/* Escritorios grandes */
@media (min-width: 1200px) and (max-width: 1599px) {

  .row-1 a:first-child {
    margin-right: 20px;
  }

  .row-1 {
    padding-left: 90px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-2 {
    padding-right: 45px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-2 a:first-child {
    margin-right: 20px;
  }

  .row-3 {
    padding-right: 90px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-3 a:first-child {
    margin-right: 20px;
  }

  .modal-content .title-modal p {
    font-size: 1.7rem;
  }

  .modal-info p {
    font-size: 2.5rem;
  }

  .info-title p {
    font-size: 1.5rem;
  }

  .anteriores h1 {
    font-size: 3.5rem;
  }

  .top-image img{
    height: 80dvh;
  }

  :root{
    --hero-height: clamp(650px, 60vh, 800px);
  }

}

/* Escritorios muy grandes */
@media (min-width: 1600px) and (max-width: 2559px) {

  .row-1 a:first-child {
    margin-right: 20px;
  }

  .row-1 {
    padding-left: 90px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-2 {
    padding-right: 45px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-2 a:first-child {
    margin-right: 20px;
  }

  .row-3 {
    padding-right: 90px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-3 a:first-child {
    margin-right: 20px;
  }

  .modal-content .title-modal p {
    font-size: 1.7rem;
  }

  .modal-info p {
    font-size: 2.5rem;
  }

  .info-title p {
    font-size: 1.5rem;
  }

  .anteriores h1 {
    font-size: 3.5rem;
  }

  .top-image img{
    height: 90dvh;
  }

  :root{
    --hero-height: clamp(650px, 60vh, 800px);
  }

}

/* Pantallas 2K */
@media (min-width: 2560px) and (max-width: 3839px) {

  .row-1 a:first-child {
    margin-right: 20px;
  }

  .row-1 {
    padding-left: 90px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-2 {
    padding-right: 45px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-2 a:first-child {
    margin-right: 20px;
  }

  .row-3 {
    padding-right: 90px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-3 a:first-child {
    margin-right: 20px;
  }

  .modal-content .title-modal p {
    font-size: 1.7rem;
  }

  .modal-info p {
    font-size: 2.5rem;
  }

  .info-title p {
    font-size: 1.5rem;
  }

  .anteriores h1 {
    font-size: 3.5rem;
  }

  .top-image img{
    height: 90dvh;
  }

  :root{
    --hero-height: clamp(650px, 60vh, 800px);
  }

}

/* Pantallas 4K */
@media (min-width: 3840px) {

  .row-1 a:first-child {
    margin-right: 20px;
  }

  .row-1 {
    padding-left: 90px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-2 {
    padding-right: 45px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-2 a:first-child {
    margin-right: 20px;
  }

  .row-3 {
    padding-right: 90px;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .row-3 a:first-child {
    margin-right: 20px;
  }

  .modal-content .title-modal p {
    font-size: 1.7rem;
  }

  .modal-info p {
    font-size: 2.5rem;
  }

  .info-title p {
    font-size: 1.5rem;
  }

  .anteriores h1 {
    font-size: 3.5rem;
  }

  .top-image img{
    height: 90dvh;
  }

  :root{
    --hero-height: clamp(650px, 60vh, 800px);
  }

}