/*
 * Homepage Atelier: keep both photographs inside the section in Safari.
 * A definite media height avoids the percentage-height/grid sizing cycle
 * that can let the images overlap the following Editoriale section.
 */
@media (min-width: 1041px) {
  .atelier {
    overflow: hidden;
  }

  .atelier-grid {
    height: 720px;
    min-height: 720px;
  }

  .atelier-media,
  .atelier-copy {
    min-width: 0;
    min-height: 0;
    height: 720px;
  }

  .atelier-media {
    overflow: hidden;
  }

  .atelier-media > .aura-responsive-media {
    display: block;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .atelier-media img {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 720px;
    object-fit: cover;
  }

  .atelier-copy > div,
  .atelier-copy h2 {
    min-width: 0;
    max-width: 100%;
  }
}

@media (min-width: 721px) and (max-width: 1040px) {
  .atelier-grid {
    min-height: 0;
  }

  .atelier-media {
    min-height: 600px;
    height: 600px;
    overflow: hidden;
  }

  .atelier-media > .aura-responsive-media {
    display: block;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .atelier-media img {
    display: block;
    width: 100%;
    min-height: 0;
    height: 100%;
    max-height: 600px;
    object-fit: cover;
  }
}

@media (max-width: 720px) {
  .atelier-media {
    min-height: 460px;
    height: 460px;
    overflow: hidden;
  }

  .atelier-media > .aura-responsive-media {
    display: block;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .atelier-media > .aura-responsive-media:last-child {
    display: none;
  }

  .atelier-media > .aura-responsive-media:first-child > img {
    display: block;
  }

  .atelier-media img {
    display: block;
    width: 100%;
    min-height: 0;
    height: 100%;
    max-height: 460px;
    object-fit: cover;
  }
}