.studioPage {
  padding-bottom: 80px;
  background-color: var(--white);
  color: var(--base);
}

/* banner */

.studioBanner {
  overflow: hidden;
}

/* intro */

.studioIntro {
  width: min(816px, 100% - 40px);
  margin: 44px auto 0;
}

.studioTitle {
  font-family: var(--secondary-font);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.studioText {
  --delay: 0.15s;
  margin-top: 20px;
  font-size: var(--base-font-size);
  line-height: 1.4;
}

.studioText p + p {
  margin-top: 20px;
}

.studioText a {
  color: inherit;
}

/* services */

.studioServices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 25px;
  width: min(1232px, 100% - 40px);
  margin: 64px auto 0;
}

.studioService {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.studioServiceImage {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.studioServiceImage img {
  height: 100%;
  object-fit: cover;
}

.studioServiceTitle {
  margin-top: 20px;
  font-family: var(--secondary-font);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
}

.studioServiceLink {
  position: relative;
  margin-top: 10px;
  font-size: var(--body-font-size);
  line-height: 1.4;
  text-transform: uppercase;
}

.studioServiceLink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transition: transform 0.5s var(--landing-ease);
}

.studioService:hover .studioServiceLink::after {
  transform: scaleX(1);
}

@media screen and (min-width: 769px) {

  .studioService:nth-child(3n + 2) {
    --delay: 0.12s;
  }

  .studioService:nth-child(3n + 3) {
    --delay: 0.24s;
  }
}

@media screen and (max-width: 768px) {

  .studioPage {
    padding-bottom: 56px;
  }

  .studioIntro {
    margin-top: 32px;
  }

  .studioTitle {
    font-size: 24px;
  }

  .studioServices {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 2px;
    margin-top: 48px;
  }

  .studioServiceTitle {
    margin-top: 12px;
    font-size: var(--title-font-size);
  }

  .studioService:nth-child(2n) {
    --delay: 0.12s;
  }
}