/* page-studio.css — copied from app/studio/studio.css
   The template shipped plain global CSS, so the class names here are already
   the ones the markup uses. */

.studio-page {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  background-color: var(--base-100);
}

.studio-page .studio-header {
  position: relative;
  width: 100%;
  height: 90svh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.studio-page .studio-header .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.studio-page .studio-header .container .studio-header-row:nth-child(1) {
  display: flex;
  justify-content: flex-end;
}

.studio-page .studio-header .container .studio-header-row:nth-child(2) {
  display: flex;
  justify-content: flex-start;
}

.studio-page .studio-header .container .studio-header-row h1 {
  font-size: 14vw;
}

.studio-page .studio-copy .container {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding-bottom: 10rem;
}

.studio-page .studio-copy .studio-copy-img {
  width: 30%;
  margin: 0 auto;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 4rem;
}

.studio-page .studio-copy .studio-copy-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-page .studio-copy p {
  width: 50%;
  margin: 0 auto;
  text-align: left;
  margin-bottom: 4rem;
}

@media (max-width: 1000px) {
  .studio-page .studio-copy .studio-copy-img,
  .studio-page .studio-copy p {
    width: 100%;
  }
}

@media (min-width: 2400px) {
  .studio-page .studio-header .container .studio-header-row h1  {
    font-size: 20rem;
  }
}