/***DESKTOPS (X-LARGE SCREEN)
*****************************************************/
@media (min-width: 1920px) {  
}

/***DESKTOPS (LARGE SCREEN)
*****************************************************/
@media (min-width: 1600px) {
}

/***NOTEBOOKS (MEDIUM SCREEN)
*****************************************************/
@media (min-width: 1024px) {
}



@media (max-width: 1023px) {

  :root {
    --viewportHeight: calc(var(--vh, 1vh) * 100);
  }

  body {
    height: 100vh;
    height: var(--viewportHeight);
  }

  .imagenes-top-right .sombra {
    display: none;
  }

  .list {
    margin-top: calc(var(--rowGutterBetweenSections) * 4);
    padding-top: var(--rowGutterBetweenSections);
    width: 100%;
  }

  .imagenes-top-right .texto {
    content: url("../media/blur-5.png");
    position: fixed;
    width: 90%;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    z-index: 0;
    max-width: 90vw;
    max-height: 90vh;
    pointer-events: none;
  }

  .anim-holder {
    position: relative;
    grid-column: 1 / span 10;
    padding: calc(var(--spaceY) * 1) var(--spaceX);
  }

  ::selection {
    background: var(--paletteViolet);
    color: white;
  }

  ::-moz-selection {
    background: var(--paletteViolet);
    color: white;
  }

  /* Project media base */
  .project-media {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: var(--rowGutterMedium);
  }

  .project-media figure {
    width: 100%;
    margin-top: 0 !important;
    margin-left: 0 !important;
  }

  .project-media figure.small,
  .project-media figure.wide {
    width: 100%;
  }
}



/*** TABLETS (SCALE ADJUSTMENTS ONLY) **********************************************/
@media (min-width: 481px) and (max-width: 1023px) {

  :root {
    --fontSizeSmall: 1rem;
    --fontSizeMedium: 1.2rem;
    --fontSizeLarge: 1.6rem;
  }

  .list {
    margin-top: calc(var(--rowGutterBetweenSections) * 3);
  }

  .imagenes-top-right .texto {
    max-width: 80vw;
    max-height: 80vh;
  }
}



/*** MOBILES (PORTRAIT) *************************************************************/
@media (max-width: 480px) {

  :root {
    --fontSizeSmall: 0.7rem;
    --fontSizeMedium: 0.9rem;
    --fontSizeLarge: 1rem;
  }

  .imagenes-top-right .texto {
    width: 170%;
    top: 50%;
    max-width: 170vw;
    max-height: 90vh;
    opacity: 0.3;
  }

}


/***MOBILES (PORTRAIT)
*****************************************************/

@media (max-width: 480px) {

   /* html, body {
    overflow-y: hidden;
  } */

  /* ===== VARIABLES ===== */
  :root {
    --fontSizeSmall: 0.7rem;
    --fontSizeMedium: 0.9rem;
    --fontSizeLarge: 1rem;
  }
 /* 👉 contenedor imágenes */
  .project-media {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: var(--rowGutterMedium);
  }
::selection {
  background: var(--paletteViolet);
  color: white; /* o creás --paletteOrange */
}

::-moz-selection {
  background: var(--paletteViolet);
  color:  white;
}
  /* 👉 todas las imágenes iguales */
  .project-media figure {
    width: 100%;
    margin-top: 0 !important;
    margin-left: 0 !important;
  }

  /* 👉 apagamos tamaños especiales */
  .project-media figure.small,
  .project-media figure.wide {
    width: 100%;


}
}