html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

:root {
  --color-primary-blue: #aeddf6;
  --color-secondary-blue: #007ec1;
  --color-transparent-blue: rgba(174, 221, 246, 0.4);
  --color-primary-pink: #ffe1e3;
  --color-secondary-pink: #992227;
  --color-transparent-pink: rgba(255, 225, 227, 0.4);
  --color-primary-green: #c7ebe7;
  --color-secondary-green: #3d756e;
  --color-transparent-green: rgba(199, 235, 231, 0.4);
}

body {
  background-color: white;
  color: black;
  font-family: "Matter";
  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6;
  padding: 0;
  margin: 0;
}

h2,
h3 {
  margin-block: 0;
}

p {
  font-size: 1rem;
}

a {
  color: inherit;
}

.content-grid {
  --padding-inline: 1rem;
  --content-max-width: 900px;
  --breakout-max-width: 1200px;
  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );
  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - var(--padding-inline) * 2,
      var(--content-max-width)
    )
    [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(
      var(--padding-inline),
      1fr
    )
    [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width {
  grid-column: full-width;
  display: grid;
  grid-template-columns: inherit;
}

.theme--blue {
  background-color: var(--color-transparent-blue);
  color: var(--color-secondary-blue);
}

.theme--pink {
  background-color: var(--color-transparent-pink);
  color: var(--color-secondary-pink);
}

.theme--green {
  background-color: var(--color-transparent-green);
  color: var(--color-secondary-green);
}

.section-title {
  font-size: 2rem;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
}

img.full-width {
  width: 100%;
  max-height: 45vh;
  -o-object-fit: cover;
  object-fit: cover;
}

#title-bar {
  height: 4rem;
  background-color: rgb(1, 108, 183);
}

#title-bar .content-row {
  display: flex;
  justify-content: space-between;
}

#title-bar .social-list {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  font-size: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}

#gkids-logo {
  display: block;
  height: 2.4rem;
  margin: 1.6rem auto;
}

.social-list li a {
  color: white;
}

.social-list a:hover {
  color: black;
}

#primary-header {
  background: url(../images/header-bkg.webp) no-repeat bottom center;
  background-size: cover;
  color: white;
  text-align: center;
  text-transform: uppercase;
  height: calc(100vh - 4rem);
  place-items: center;
}

#primary-header .header-title h1 {
  margin: 0;
  padding: 0;
  line-height: 2em;
  margin-bottom: 2rem;
  font-size: 2rem;
  letter-spacing: 0.2rem;
}

#primary-header .header-title h1 small {
  display: block;
  font-weight: lighter;
  font-size: 0.5em;
  line-height: 1;
}

#primary-header .subheader {
  line-height: 1.2;
  margin-block: 1.2rem;
}

#primary-header .call-to-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-block: 1rem;
  font-size: 1.2rem;
}

#primary-header .event {
  display: flex;
  flex-direction: column;
  text-align: center;
}

#primary-header .film-title {
  font-weight: 400;
  text-decoration: none;
}

#primary-header .film-title:hover {
  text-decoration: underline;
}

#primary-header .film-title,
#primary-header .film-date {
  display: inline-block;
}

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1rem;
}

#navigation ul:not(:last-child) {
  margin-bottom: 2rem;
}

#navigation ul li a {
  color: white;
  text-decoration: none;
}

#navigation ul li a:hover {
  text-decoration: underline;
}

#primary {
  background-color: white;
}
#news .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 4rem;
}

.news-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 2rem;
  font-size: 1rem;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.news-item a {
  font-size: 1.5rem;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

.news-item a:hover {
  text-decoration: underline;
}

#news h2::after {
  content: "";
  display: block;
  width: 225px;
  height: 10px;
  margin: 2rem auto;
  background: var(--color-primary-pink);
  background: linear-gradient(
    90deg,
    var(--color-primary-pink) 33%,
    var(--color-primary-green) 33%,
    var(--color-primary-green) 67%,
    var(--color-primary-blue) 67%
  );
}
#line-up h2::after {
  content: "";
  display: block;
  width: 225px;
  height: 10px;
  margin: 2rem auto;
  background: var(--color-primary-pink);
  background: linear-gradient(
    90deg,
    var(--color-primary-pink) 33%,
    var(--color-primary-green) 33%,
    var(--color-primary-green) 67%,
    var(--color-primary-blue) 67%
  );
}
#line-up .content {
  padding-top: 4rem;
}
#line-up .section-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-size: 1.2rem;
}

#line-up img {
  max-width: 100%;
}
#line-up .poster-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

#trailer .content {
  padding-top: 4rem;
}
#trailer iframe {
  aspect-ratio: 16/9;
}

#tgwltt .content:before {
  content: "";
  display: block;
  width: 100%;
  height: 50px;
  background-color: var(--color-primary-blue);
}

#summer-wars .content:before {
  content: "";
  display: block;
  width: 100%;
  height: 50px;
  background-color: var(--color-primary-pink);
}

#wolf-children .content:before {
  content: "";
  display: block;
  width: 100%;
  height: 50px;
  background-color: var(--color-primary-green);
}

.section--film {
  overflow: hidden;
}

.section--film .text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-inline: 1rem;
  margin-top: 3rem;
}

.section--film .film-title {
  font-size: 2.25rem;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  letter-spacing: 5px;
}

.section--film .film-metadata {
  font-size: 1.25rem;
  text-align: center;
}

.section--film .image-gallery {
  display: flex;
  gap: 3rem;
  justify-content: center;
  margin-block: 2rem 4rem;
}

.section--film p:last-child {
  margin: 0 auto;
}

.section--film .image-gallery img {
  max-width: 100%;
  width: 500px;
  height: auto;
}

.section--film .image-gallery img:first-child,
.section--film .image-gallery img:last-child {
  display: none;
}

@media only screen and (min-width: 43rem) {
  .section--film .text {
    padding-inline: 6rem;
  }

  .section--film .image-gallery img:first-child,
  .section--film .image-gallery img:last-child {
    display: block;
  }

  .section--film {
    overflow: hidden;
  }
}
#biography {
  padding-block-start: 5rem;
  overflow: hidden;
}

#biography .content-row {
  display: flex;
  flex-direction: column-reverse;
  gap: 3rem;
  align-items: center;
}

#biography .biography__portrait img {
  position: relative;
  bottom: -45px;
  width: 100%;
}

@media only screen and (min-width: 48rem) {
  #biography .content-row {
    flex-direction: row;
  }

  #biography .biography__text {
    width: 75%;
  }
}

#biography .section-title::after {
  content: "";
  display: block;
  width: 225px;
  height: 10px;
  margin: 2rem auto;
  background: var(--color-primary-pink);
  background: linear-gradient(
    90deg,
    var(--color-primary-pink) 33%,
    var(--color-primary-green) 33%,
    var(--color-primary-green) 67%,
    var(--color-primary-blue) 67%
  );
}

#about-gkids {
  --content-max-width: 600px;
  background: #141414;
  color: white;
  place-items: center;
  padding-block: 10rem;
}

#about-gkids a {
  color: white;
}

#about-gkids a:hover {
  background-color: white;
  color: black;
}

#footer {
  background-color: black;
  color: white;
  font-style: italic;
  font-size: 0.7rem;
}

#footer a {
  color: white;
  text-decoration: none;
}

#footer a:hover {
  text-decoration: underline;
}

#footer ul {
  list-style: none;
}

#footer .content-row {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

#footer-container {
  justify-content: space-between;
}

@media only screen and (min-width: 48rem) {
  #footer {
    font-size: 1rem;
  }
  #footer .content-row {
    gap: 1rem;
  }
}