/* Keyframes */

@keyframes appearFromTopCentered {
  from {
    opacity: 0;
    transform: translate(-50%, -20%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Header */

.header {
  position: absolute;
  inset: 0 auto auto 50%;
  z-index: 100;
  width: 100%;
  max-width: 144rem;
  min-height: calc(3rem + 6rem);
  padding: 3rem 4.5rem;
  transform: translateX(-50%);
}

.header.is-dark {
  min-height: calc(6rem + 6rem);
}

.header.is-sticky {
  position: fixed;
  color: var(--color-black);
  animation: appearFromTopCentered 0.4s ease-in-out;
}

.header__logo {
  position: absolute;
  inset: 3rem auto auto calc(50% - (38.4rem / 2));
  z-index: 1;
  width: 38.4rem;
}

.header__navigation__list {
  display: flex;
  gap: 4rem;
}

.header__navigation__item:nth-last-child(2) {
  margin-inline-start: auto;
}

.header__navigation__link {
  background-position-x: right;
  background-size: 0 1px;
  transition: background-size 0.2s ease-in-out;
}

.header__navigation__link:focus-visible,
.header__navigation__link:hover {
  background-position-x: left;
  background-size: 100% 1px;
}

/* Hero */

.hero {
  height: 75rem;
}

/* Moodboard */

.moodboard {
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(159, 1fr);
}

.moodboard__element--form:nth-child(1) { grid-area: 1 / 9 / 7 / 17; }
.moodboard__element--picture:nth-child(2) { grid-area: 1 / 1 / 11 / 7; }
.moodboard__element--picture:nth-child(3) { grid-area: 2 / 18 / 9 / 25; }
.moodboard__element--picture:nth-child(4) { grid-area: 7 / 14 / 14 / 21; }
.moodboard__element--picture:nth-child(5) { grid-area: 13 / 3 / 21 / 10; }
.moodboard__element--picture:nth-child(6) { grid-area: 17 / 9 / 25 / 15; }
.moodboard__element--writing:nth-child(7) { grid-area: 21 / 3 / 23 / 9; }
.moodboard__element--picture:nth-child(8) { grid-area: 15 / 18 / 25 / 25; }
.moodboard__element--writing:nth-child(9) { grid-area: 25 / 18 / 26 / 25; }
.moodboard__element--picture:nth-child(10) { grid-area: 26 / 1 / 38 / 8; }
.moodboard__element--picture:nth-child(11) { grid-area: 30 / 10 / 41 / 18; }
.moodboard__element--picture:nth-child(12) { grid-area: 27 / 16 / 36 / 25; }
.moodboard__element--writing:nth-child(13) { grid-area: 36 / 18 / 39 / 25; }
.moodboard__element--picture:nth-child(14) { grid-area: 41 / 1 / 49 / 12; }
.moodboard__element--picture:nth-child(15) { grid-area: 39 / 16 / 51 / 25; }
.moodboard__element--writing:nth-child(16) { grid-area: 49 / 2 / 51 / 12; }
.moodboard__element--picture:nth-child(17) { grid-area: 51 / 4 / 60 / 13; }
.moodboard__element--picture:nth-child(18) { grid-area: 53 / 11 / 67 / 23; }
.moodboard__element--writing:nth-child(19) { grid-area: 67 / 11 / 69 / 23; }
.moodboard__element--picture:nth-child(20) { grid-area: 62 / 1 / 73 / 10; }
.moodboard__element--writing:nth-child(21) { grid-area: 73 / 2 / 75 / 10; }
.moodboard__element--picture:nth-child(22) { grid-area: 70 / 15 / 84 / 25; }
.moodboard__element--picture:nth-child(23) { grid-area: 77 / 11 / 86 / 17; }
.moodboard__element--writing:nth-child(24) { grid-area: 84 / 17 / 86 / 25; }
.moodboard__element--picture:nth-child(25) { grid-area: 76 / 1 / 87 / 9; }
.moodboard__element--picture:nth-child(26) { grid-area: 88 / 1 / 101 / 10; }
.moodboard__element--picture:nth-child(27) { grid-area: 90 / 7 / 104 / 17; }
.moodboard__element--picture:nth-child(28) { grid-area: 91 / 19 / 101 / 25; }
.moodboard__element--writing:nth-child(29) { grid-area: 104 / 11 / 105 / 16; }
.moodboard__element--picture:nth-child(30) { grid-area: 105 / 1 / 113 / 8; }
.moodboard__element--writing:nth-child(31) { grid-area: 113 / 2 / 114 / 8; }
.moodboard__element--picture:nth-child(32) { grid-area: 103 / 18 / 113 / 25; }
.moodboard__element--picture:nth-child(33) { grid-area: 106 / 10 / 115 / 20; }
.moodboard__element--writing:nth-child(34) { grid-area: 115 / 10 / 116 / 20; }
.moodboard__element--picture:nth-child(35) { grid-area: 116 / 1 / 126 / 13; }
.moodboard__element--picture:nth-child(36) { grid-area: 117 / 16 / 127 / 25; }
.moodboard__element--picture:nth-child(37) { grid-area: 121 / 6 / 133 / 15; }
.moodboard__element--writing:nth-child(38) { grid-area: 133 / 6 / 135 / 15; }
.moodboard__element--picture:nth-child(39) { grid-area: 137 / 4 / 148 / 16; }
.moodboard__element--picture:nth-child(40) { grid-area: 145 / 1 / 158 / 11; }
.moodboard__element--picture:nth-child(41) { grid-area: 131 / 18 / 143 / 25; }
.moodboard__element--picture:nth-child(42) { grid-area: 150 / 13 / 160 / 25; }

.moodboard__element--picture:nth-child(3) img,
.moodboard__element--picture:nth-child(4) img { max-height: 400px; }
.moodboard__element--picture:nth-child(5) img,
.moodboard__element--picture:nth-child(6) img,
.moodboard__element--picture:nth-child(14) img,
.moodboard__element--picture:nth-child(30) img { max-height: 450px; }
.moodboard__element--picture:nth-child(12) img,
.moodboard__element--picture:nth-child(17) img,
.moodboard__element--picture:nth-child(23) img,
.moodboard__element--picture:nth-child(32) img { max-height: 505px; }
.moodboard__element--picture:nth-child(2) img,
.moodboard__element--picture:nth-child(8) img,
.moodboard__element--picture:nth-child(28) img,
.moodboard__element--picture:nth-child(32) img,
.moodboard__element--picture:nth-child(35) img,
.moodboard__element--picture:nth-child(36) img,
.moodboard__element--picture:nth-child(42) img { max-height: 560px; }
.moodboard__element--picture:nth-child(11) img,
.moodboard__element--picture:nth-child(20) img,
.moodboard__element--picture:nth-child(25) img,
.moodboard__element--picture:nth-child(39) img { max-height: 615px; }
.moodboard__element--picture:nth-child(10) img,
.moodboard__element--picture:nth-child(15) img { max-height: 650px; }
.moodboard__element--picture:nth-child(37) img,
.moodboard__element--picture:nth-child(41) img { max-height: 675px; }
.moodboard__element--picture:nth-child(26) img,
.moodboard__element--picture:nth-child(40) img { max-height: 730px; }
.moodboard__element--picture:nth-child(18) img,
.moodboard__element--picture:nth-child(22) img,
.moodboard__element--picture:nth-child(27) img { max-height: 785px; }

.moodboard__element--writing:nth-child(7),
.moodboard__element--writing:nth-child(38) {
  padding-block-start: 1.6rem;
  padding-inline-end: 1.6rem;
}

.moodboard__element--writing:nth-child(9) {
  padding-block-start: 0.8rem;
}

.moodboard__element--picture:nth-child(11),
.moodboard__element--writing:nth-child(29),
.moodboard__element--writing:nth-child(31) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.moodboard__element--writing:nth-child(29),
.moodboard__element--writing:nth-child(31) {
  align-items: end;
}

.moodboard__element--writing:nth-child(13) {
  padding-block-start: 2.4rem;
  padding-block-end: 1.6rem;
  padding-inline: 2.4rem;
}

.moodboard__element--writing:nth-child(16) {
  padding-block-end: 1.6rem;
}

.moodboard__element--writing:nth-child(19),
.moodboard__element--writing:nth-child(21),
.moodboard__element--writing:nth-child(24),
.moodboard__element--writing:nth-child(34) {
  padding-block-start: 1.6rem;
}

.moodboard__element--writing:nth-child(24) {
  padding-inline: 1.6rem;
}

/* Newsletter */

.newsletter {
  transform: translateY(-2.4rem);
}

/* Footer */

.footer {
  padding-bottom: 8rem;
}

.footer__navigation__list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3.2rem;
}

/* Podcast */

.podcast__title {
  font-size: 4.3vw;
}

@media screen and (min-width: 1400px) {
  .podcast__title {
    font-size: 6.1rem;
  }
}

.podcast__btn--play,
.podcast__btn--pause {
  width: 5vw;
  height: 5vw;
  max-width: 7rem;
  max-height: 7rem;
}

.podcast__btn--down-vol,
.podcast__btn--up-vol {
  width: 4vw;
  height: 4vw;
  max-width: 4rem;
  max-height: 4rem;
}