@media only screen and (max-width: 868px) {
:root{

  --btn-font-size: 1.3rem;

  --mobile-gutter: 10px;
}

.menu-label,
.videos-row-counter,
.article-strip-counter,
.edito-strip-counter,
h1.p{
  font-size: 1.3rem;
}

.newsletter{
  max-width: none;
}

h1,
.menu-label,
.article-title,
.article-credit,
.edito-heading,
.video-caption-title,
.area,
.title-stockist{
  text-wrap: pretty;
}

.article:has(+ .article)::after{
  max-width: calc(100% - 2 * var(--mobile-gutter));
}

body, html{
  height: 100vh;
  height: 100dvh;
  overflow: scroll;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.video-frame{

  width: min(calc(100dvw - 2 * var(--mobile-gutter)), calc(70dvh * var(--video-frame-aspect, 16 / 9)));
  height: auto;
  max-height: 70dvh;
}

.videos-row{
  padding: 0;
  gap: 20px;
}
.edito-strip{
  padding: 0;
  gap: 20px;
}

.cover-credit{
  display: none;
}

.video-item.is-centered:hover .video-mute-toggle,
.video-item.is-centered:hover .video-fullscreen-toggle,
.video-item:hover .video-mute-toggle,
.video-item:hover .video-fullscreen-toggle{
  opacity: 0;
}
.video-item.is-centered .video-mute-toggle,
.video-item.is-centered .video-fullscreen-toggle{
  opacity: 1;
}

.edito-strip img{
  width: 70vw;
  height: auto;
}

.video-caption{
  max-width: 70vw;
}
.video-caption:not(.edito-caption){
  max-width: calc(100% - 2 * var(--mobile-gutter));
}

.hero-video-m{
  height: 110vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: block;
}

.hero-video{
  display: none;
}
    #animation {
      width: 100%;
      height: 100%;
      position: fixed;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }

    .s{
      margin: 0;

    }
    .s-g{
      font-family: "adobe-garamond-pro", serif;
      font-size: 1.3rem;
      line-height: 1.5rem;

    }

    .article-intro{
      font-size: 1.3rem;
      line-height: 1.5rem;
    }

    .article-title,
    .article-credit,
    .video-caption,
    .video-caption-title,
    .edito-heading{
      font-size: 1.3rem;
      line-height: 1.5rem;
    }

    .article-strip{
      width: calc(100% - 2 * var(--mobile-gutter));
      max-width: calc(100% - 2 * var(--mobile-gutter));
      gap: 16px;
    }

    .article-strip-counter{
      width: calc(100% - 2 * var(--mobile-gutter));
      max-width: calc(100% - 2 * var(--mobile-gutter));
      margin-top: var(--space-s);
    }

    .article{
      gap: var(--space-m);
    }

    .line{
      margin: 45px 0;
    }

    .playlist-track{
      font-size: 1.3rem;
      line-height: 1.5rem;
    }
    .old-issue{
      margin-bottom: 5rem;
        margin-top: 5rem;
        text-align: center;
    }
    .old-issue a{
      text-decoration: none;
      color: var(--color-black);
    }
    body,
    html {
      margin: 0;
      -webkit-font-smoothing: antialiased;
    }
    .images-magazine {
      display: flex;
      flex-direction: row;
      width: 90%;
      flex-wrap: wrap;
    }

    .cover-item-wrap{
      flex: 0 1 calc(50% - 2.5px);
    }
    .images-magazine figure {
      flex: 1 1 48%;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-block-start: 0;
      margin-inline-start: 0;
    }

    figure img {
      width: 100%;
    }
    .logo {

      margin-top: calc(52.5vh - 65px);
      position: sticky;
      top: 2.5%;
      z-index: 1;
      width: 100%;
      height: 4rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .logo img {
      width: 30vw;
      margin-left: 7.5px;
    }
    .wrapper-video-m{
  display: block;
}

    .wrapper {

      width: 100%;
    }
    .stockists{
      flex-direction: column;
    }

    .about-mag{
      margin-top: 60vh;
    }
    .title-magazine{
      display: flex;
      align-items: center;
      text-align: center;
      margin-bottom: 2rem;
      flex-direction: column;
      line-height: 1.35rem;
      font-size: 1.3rem;
      margin-top: 3vh;
    }
p{
  font-variant-caps: normal !important;
}
h1{
  font-variant-caps: all-small-caps !important;
}
    .credits-mob{
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 1.3rem;
      line-height: 1.5rem;
      margin-bottom: 2rem;
      margin-top: 2rem;
      width: 85%;

      gap: 1.5rem;
    }

    .credits-mob .image-list .p + h1{
      margin-top: 1.5rem;
    }
    .credits-desktop{
      display: none;
    }
    #animation img {
      object-fit: cover;
    }

    .about-mag{
      text-align: center;
      margin-top: 2.5rem;
      width: 85%;
      margin-bottom: 2rem;
    }
    .col{
      display: flex;
        flex-direction: column;
        width: 50%;
        text-align: center;
        align-items: center;
    }

    .credits{
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .col h1{
      white-space: nowrap;
    }
    button{
      position: fixed;
        bottom: 3%;
        outline: none;
        font-size: 1.3rem;
        border: none;
        padding: 9px 30px;
        background-color: var(--color-black);
    }
    button a{
      color: var(--color-white);
      text-decoration: none;
    }
    ul{
      padding: 0;
      list-style: none;
    }
    ul a {
      text-decoration: none;
      color: var(--color-black);
    }

.footer{
        font-family: "adobe-garamond-pro", serif;
  width: 82.5%;
        padding-bottom: 10vh;
        align-items: center;
        display: flex;
        font-size: 1.3rem;
        flex-direction: column;
        line-height: 1.5rem;
}

    .footer > div:last-child{
      padding-top: 2rem;
      margin-right: 0rem;
      font-family: "adobe-garamond-pro", serif;

    }
    .footer > div:first-child{
      padding-top: 2rem;
      margin-left: 0rem;
    }
    .stockist{
    margin-bottom: 2rem;
    width: 100%;
    }
    .stockist h1{
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .footer > div{
      padding: .75rem;
      width: 82.5%;
    }
    .footer > div > div{
      display: flex;
        flex-direction: column;
        padding-top: 1rem;

    }

    .footer > div > div:first-of-type{
        padding-top: 0rem;
    }

    .logo img{
      cursor: pointer;
    }

    .menu-list .menu-label{
      margin-bottom: 2px;
    }
    }