/*DISCOGRAPHY*/
/* Default layout (desktop/tablet) */
.spotify-wrapper {
  display: flex;
  flex-direction: row; /* Side-by-side */
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin: -10px auto 30px auto;
  flex-wrap: wrap; /* allow wrapping if narrow screens */
  width: 100%;
  max-width: 1200px;
}

.spotify-wrapper iframe {
  width: 100%;
  max-width: 320px;
  height: 550px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.side_article{
    width: 100%;
}
/* Mobile layout */
@media screen and (max-width: 768px) {
  .spotify-wrapper {
    flex-direction: row;
    align-items: center;
    gap: 30px;
    margin-top: -70px;
  }

  .spotify-wrapper iframe {
    max-width: 25%;
    height: 450px; /* optional: smaller height for mobile */
  }
  .title-page
  {
      padding: 20px;
  }
  .side_article{
      margin-left: 40px;
      width: 100%;
  }
  .grid_8{
      margin-left: 50px;
  }
  .figure_section{
      width: 100%;
      margin-left: 20px;
  }
}
/* Mobile layout */
@media screen and (max-width: 767px) {
  .spotify-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: -70px;
  }

  .spotify-wrapper iframe {
    max-width: 100%;
    height: 450px; /* optional: smaller height for mobile */
  }
  .title-page
  {
      padding: 20px;
  }
  .side_article, .grid_8
  {
      margin-left: 0;
  }
}
/* Mobile layout */
@media screen and (max-width: 430px) {


  .spotify-wrapper iframe {
    max-width: 100%;
    height: 450px; /* optional: smaller height for mobile */
  }
  .side_article, .grid_8
  {
      margin-left: 0;
  }
}
/* Mobile layout */
@media screen and (max-width: 320px) {
  .spotify-wrapper, .title-page, .figure_section, .side_article, .grid_8 {
        transform: scale(0.8);
        margin-left: 0px;
  }
    .spotify-wrapper {
    flex-direction: row;
    align-items: center;
    gap: 30px;
    margin-top: -220px;
  }
    .spotify-wrapper iframe {
    max-width: 100%;
    height: 400px; /* optional: smaller height for mobile */
  }
    .footer_text {
      margin-left: 0px;
  }
  .title-page{
      margin-left: -20px;
  }
}
/* Mobile layout */
@media screen and (max-width: 240px) {
  .spotify-wrapper, .title-page, .figure_section, .side_article, .grid_8 {
        transform: scale(0.7);
        margin-top: 0px;
        margin-left: -10px;
  }
      .spotify-wrapper {
    flex-direction: row;
    align-items: center;
    gap: 30px;
    margin-top: -290px;
  }
  
    .footer_text {
      margin-left: -50px;
  }
  .title-page{
      margin-left: -40px;
  }
    .title-page2{
      font-size: 26px;
      margin-left: -40px;
  }
}