/* ------------------------------------
   Studio page
------------------------------------ */

.studio-page {
  width: 100%;
}

/* ------------------------------------
   Shared typography
------------------------------------ */

.studio-intro__text,
.studio-services__item,
.studio-team__member p,
.studio-team__member a,
.studio-collaborators__text,
.studio-memberships__item p,
.studio-awards__row p,
.studio-contact__text p,
.studio-contact__text a {
  font-family: var(--font-serif);
  font-size: var(--fs-serif);
  font-weight: var(--fw-serif);
  line-height: var(--lh-serif);
  letter-spacing: var(--tracking-serif);
}

.studio-label {
  font-family: var(--font-sans);
  font-size: var(--fs-sans);
  font-weight: var(--fw-sans);
  line-height: var(--lh-sans);
  letter-spacing: var(--tracking-sans);
}

.studio-team__member a,
.studio-contact__text a,
.studio-memberships__item a,
.studio-awards a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.08em;
}

.studio-team__member a:hover,
.studio-contact__text a:hover,
.studio-memberships__item a:hover,
.studio-awards a:hover {
  color: var(--color-hover-red);
}

/* ------------------------------------
   Shared spacing
------------------------------------ */

.studio-section {
  padding: 0 var(--page-padding);
  align-items: start;
}

.studio-section + .studio-section {
  margin-top: 56px;
}

.studio-label {
  grid-column: 1 / 4;
}

/* ------------------------------------
   Hero
------------------------------------ */

.studio-hero {
  padding: 0 var(--page-padding);
  margin-top: calc(var(--header-spacing) + 10px);
}

.studio-hero__media {
  grid-column: 1 / 13;
  margin: 0;
}

.studio-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ------------------------------------
   Intro
------------------------------------ */

.studio-intro {
  padding: 64px var(--page-padding) 56px;
}

.studio-intro__text {
  grid-column: 1 / -1;
  transform: rotate(-0.8deg);
  transform-origin: left top;
}

/* ------------------------------------
   Services
------------------------------------ */

.studio-services__item {
  grid-column: 4 / 8;
}

.studio-services__item--2,
.studio-services__item--3,
.studio-services__item--4,
.studio-services__item--5,
.studio-services__item--6 {
  margin-top: 2px;
}

/* ------------------------------------
   Team
------------------------------------ */

.studio-team__member p + p {
  margin-top: 2px;
}

.studio-team__member--mikel {
  grid-column: 4 / 8;
}

.studio-team__member--ane {
  grid-column: 8 / 12;
}

.studio-team__member--joel {
  grid-column: 12 / 15;
}

/* ------------------------------------
   Collaborators
------------------------------------ */

.studio-collaborators__text {
  grid-column: 4 / 12;
}

/* ------------------------------------
   Memberships
------------------------------------ */

.studio-memberships__item p + p {
  margin-top: 2px;
}

.studio-memberships__item--eide {
  grid-column: 4 / 8;
}

.studio-memberships__item--diga {
  grid-column: 8 / 12;
}

.studio-memberships__item--adg-fad {
  grid-column: 12 / 18;
}

.studio-memberships__item--basquerville {
  grid-column: 4 / 8;
  margin-top: 16px;
}

.studio-memberships__item--pixkat {
  grid-column: 8 / 12;
  margin-top: 16px;
}

/* ------------------------------------
   Awards
------------------------------------ */

.studio-awards__row {
  display: contents;
}

.studio-awards__row p {
  margin: 0;
}

.studio-awards__row + .studio-awards__row p {
  margin-top: 4px;
}

.studio-awards__row p:nth-child(1) {
  grid-column: 4 / 8;
}

.studio-awards__row p:nth-child(2) {
  grid-column: 8 / 12;
}

.studio-awards__row p:nth-child(3) {
  grid-column: 12 / 15;
}

.studio-awards__row p:nth-child(4) {
  grid-column: 15 / 17;
}

.studio-awards__row p:nth-child(5) {
  grid-column: 18 / -1;
}

/* ------------------------------------
   Contact
------------------------------------ */

.studio-contact__text {
  grid-column: 4 / 10;
}

.studio-contact__text p + p {
  margin-top: 4px;
}

/* ------------------------------------
   Gallery
------------------------------------ */

.studio-gallery {
  padding: 120px var(--page-padding) 0;
}

.studio-gallery__image {
  margin: 0;
}

.studio-gallery__image--wide {
  grid-column: 7 / -1;
  margin-bottom: 4px;
}

.studio-gallery__image--left {
  grid-column: 1 / 7;
}

.studio-gallery__image--right {
  grid-column: 13 / -1;
}

.studio-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ------------------------------------
   Responsive
------------------------------------ */

@media (max-width: 991px) {
  .studio-section + .studio-section {
    margin-top: 48px;
  }

  .studio-hero__media {
    grid-column: 1 / 15;
  }

  .studio-team__member--mikel {
    grid-column: 4 / 9;
  }

  .studio-team__member--ane {
    grid-column: 9 / 14;
  }

  .studio-team__member--joel {
    grid-column: 14 / 19;
  }

  .studio-memberships__item--eide {
    grid-column: 4 / 9;
  }

  .studio-memberships__item--diga {
    grid-column: 9 / 14;
  }

  .studio-memberships__item--adg-fad {
    grid-column: 14 / 19;
  }

  .studio-memberships__item--basquerville {
    grid-column: 4 / 9;
  }

  .studio-memberships__item--pixkat {
    grid-column: 9 / 14;
  }

  .studio-gallery__image--wide {
    grid-column: 3 / 17;
  }
}

@media (max-width: 767px) {
  .studio-section + .studio-section {
    margin-top: 52px;
  }

  .studio-hero {
    margin-top: 24px;
  }

  .studio-hero__media {
    grid-column: 1 / -1;
  }

  .studio-intro {
    padding: 40px var(--page-padding) 40px;
  }

  .studio-intro__text {
    grid-column: 1 / -1;
    transform: none;
  }

  /* ------------------------------------
     Labels
  ------------------------------------ */

  .studio-label {
    grid-column: 1 / 4;
    margin-bottom: 12px;
  }

  /* ------------------------------------
     Services
  ------------------------------------ */

  .studio-services__item {
    margin-top: 0;
  }

  .studio-services__item--1,
  .studio-services__item--3,
  .studio-services__item--5 {
    grid-column: 1 / 5;
  }

  .studio-services__item--2,
  .studio-services__item--4,
  .studio-services__item--6 {
    grid-column: 6 / -1;
  }

  .studio-services__item--3,
  .studio-services__item--4,
  .studio-services__item--5,
  .studio-services__item--6 {
    margin-top: 0;
  }

  /* ------------------------------------
     Team
  ------------------------------------ */

  .studio-team__member--mikel {
    grid-column: 1 / 5;
  }

  .studio-team__member--ane {
    grid-column: 6 / -1;
    margin-top: 0;
  }

  .studio-team__member--joel {
    grid-column: 1 / 5;
    margin-top: 28px;
  }

  /* ------------------------------------
     Collaborators
  ------------------------------------ */

  .studio-collaborators__text {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  /* ------------------------------------
     Memberships
  ------------------------------------ */

  .studio-memberships__item--eide {
    grid-column: 1 / 5;
  }

  .studio-memberships__item--diga {
    grid-column: 6 / -1;
    margin-top: 0;
  }

  .studio-memberships__item--adg-fad {
    grid-column: 1 / 5;
    margin-top: 24px;
  }

  .studio-memberships__item--basquerville {
    grid-column: 6 / -1;
    margin-top: 24px;
  }

  .studio-memberships__item--pixkat {
    grid-column: 1 / 5;
    margin-top: 24px;
  }

  /* ------------------------------------
     Awards
  ------------------------------------ */

  .studio-awards__row {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    grid-column: 1 / -1;
    align-items: start;
  }

  .studio-awards__row + .studio-awards__row {
    margin-top: 14px;
  }

  .studio-awards__row p {
    margin: 0;
  }

  /* izquierda */
  .studio-awards__row p:nth-child(1) {
    grid-column: 1 / 5;
    grid-row: 1;
  }

  .studio-awards__row p:nth-child(2) {
    grid-column: 1 / 5;
    grid-row: 2;
    margin-top: 2px;
  }

  /* derecha */
  .studio-awards__row p:nth-child(3) {
    grid-column: 6 / -1;
    grid-row: 1;
  }

  .studio-awards__row p:nth-child(5) {
    grid-column: 6 / 7;
    grid-row: 2;
    margin-top: 2px;
    white-space: nowrap;
  }

  .studio-awards__row p:nth-child(4) {
    grid-column: 7 / -1;
    grid-row: 2;
    margin-top: 2px;
    white-space: nowrap;
    transform: translateX(-1.2em);
  }

  /* ------------------------------------
     Contact
  ------------------------------------ */

  .studio-contact__text {
    grid-column: 1 / 5;
  }

  /* ------------------------------------
     Gallery
  ------------------------------------ */

  .studio-gallery {
    padding-top: 72px;
    row-gap: 4px;
  }

  .studio-gallery__image--wide {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .studio-gallery__image--left {
    grid-column: 1 / 6;
  }

  .studio-gallery__image--right {
    grid-column: 6 / -1;
  }
}