/********************************************************/
/* HERO SECTION  */
/********************************************************/
.section-hero {
  background-image: linear-gradient(
      to right,
      rgba(34, 34, 34, 0.8),
      rgba(34, 34, 34, 0.6)
    ),
    url(../../img/main-hero.jpg);
  background-size: cover;
  background-position: 10% 0%;
  height: 90vh;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.15);
}

.hero {
  max-width: 130rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 4.8rem;
}

.heading-primary--front-page {
  color: #fdf2e9;
  transition: all 0.4s;
}

.hero-description {
  font-size: 2rem;
  color: #ffffff;
  transition: all 0.2s;
}

/********************************************************/
/* WHY SECTION  */
/********************************************************/
.section-why {
  padding: 9.6rem 0;
  background-color: #fdf2e9;
}

.why-quote-text p {
  font-size: 3.2rem;
}

.why-quote-text {
  border: none;
  background-color: transparent;
  padding: 0;
  margin-bottom: 0;
}

/********************************************************/
/* ABOUT SECTION  */
/********************************************************/
.section-about {
  padding: 9.6rem 0;
}

.about-description {
  line-height: 1.6;
  margin-bottom: 4.8rem;
}

.about-img-box {
  position: relative;
  display: flex;
  justify-content: center;
}

.about-img-description {
  position: absolute;
  font-size: 2rem;
  padding-top: 1rem;
  top: 0;
}

.about-img {
  width: 100%;
  border-radius: 0.9rem;
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

  z-index: 1;
  transition: all 0.4s;
}

.about-img:hover {
  transform: translateY(4rem);
  box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06);
}

/********************************************************/
/* ADVCAL SECTION  */
/********************************************************/
.section-advcal {
  padding: 9.6rem 0;
}

.advcal {
  border-radius: 11px;
  padding: 4.8rem;
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.1);
  width: 75%;

  display: flex;
  flex-direction: column;

  transition: all 0.4s;
}

.advcal:hover {
  box-shadow: 0 2.4rem 6.4rem rgba(0, 0, 0, 0.05);
}

.advcal:nth-child(odd) {
  justify-self: end;
  padding: 4.6rem;
}

.advcal:nth-child(even) {
  padding: 4.8rem;
  position: relative;
  overflow: hidden;
}

.advcal-header {
  text-align: center;
  margin-bottom: 4.8rem;
}

.advcal-heading {
  color: #cf711f;
  font-weight: 600;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.75;
  margin-bottom: 3.2rem;
}

.advcal-year {
  font-size: 6.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1.6rem;
}

.advcal-description {
  line-height: 1.6;
  color: #6f6f6f;
  margin-bottom: 3.2rem;
}

.advcal-cta {
  align-self: center;
  margin-top: auto;
}

/********************************************************/
/* PLAYLIST SECTION  */
/********************************************************/
.section-playlist {
  padding: 9.6rem 0;
  background-color: #fdf2e9;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.05);
}

.section-playlist-list {
  padding: 6.4rem 0 9.6rem 0;
}

.playlist-img-box {
  background-size: cover;
  width: 100%;
  aspect-ratio: 1;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.1);
  border-radius: 0.9rem;
  display: flex;
  align-items: center;
}

.playlist-img-box--etwas-schoenes {
  background-image: linear-gradient(
      to right bottom,
      rgba(253, 242, 233, 0.897),
      rgba(255, 255, 255, 0.897)
    ),
    url(../../img/etwas-schoenes-playlist.jpeg);
  background-position-y: 45%;
}

.playlist-img-box--anders-schoen {
  background-image: linear-gradient(
      to right bottom,
      rgba(253, 242, 233, 0.897),
      rgba(255, 255, 255, 0.897)
    ),
    url(../../img/anders-schoen-playlist.jpeg);
  background-position-y: 20%;
}

.playlist-links {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 3.2rem;
}

.social-link:link,
.social-link:visited {
  opacity: 40%;
  transition: all 0.3s;
  display: block;
  width: 10rem;
  aspect-ratio: 1;
  background-size: cover;
}

.social-link:hover,
.social-link:active {
  opacity: 100%;
}

.social-link--spotify:link,
.social-link--visited:visited {
  background-image: url(../../img/Spotify_Icon_RGB_Green.png);
}

.social-link--apple-music:link,
.social-link--apple-music:visited {
  background-image: url(../../img/Apple_Music_Icon_RGB_lg_073120.svg);
}

/********************************************************/
/* CONTACT SECTION  */
/********************************************************/

.section-contact {
  padding: 9.6rem 0 12.8rem;
}

.contact-box {
  background-image: linear-gradient(to right bottom, #eb984e, #e67e22);
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15);
  border-radius: 11px;
  padding: 6.4rem;

  color: #45260a;
  text-align: center;
}

.contact-box .heading-secondary {
  color: inherit;
  margin-bottom: 3.2rem;
}

.contact-text {
  font-size: 1.8rem;
  line-height: 1.8;
  margin-bottom: 4.8rem;
}

.contact-email:link,
.contact-email:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  color: #45260a;
  font-weight: 600;
  transition: all 0.3s;
}

.contact-email:hover,
.contact-email:active {
  color: #a15818;
  text-decoration: none;
}