.home {
  --ggs: 4;
  background-color: black;
  color: white;

  .slider-vertical {
    display: none !important;
  }
  
  #timer-container {
    display: none !important;
  }
  
  #chanels-container {
    display: none !important;
  }
  
  .other-holder {
    display: none !important;
  }

  .page-padding {
    padding-top: 10rem;
    display: flex;
    column-gap: 2rem;

    .left {
      width: calc(50% - 1rem);
      border-radius: 10px;
      background: #141414;
      padding: 2rem;

      .luister {
        padding-top: 8rem;
        display: flex;
        align-items: center;
        column-gap: 1rem;

        .images {
          display: flex;
          column-gap: 1rem;

          img {
            width: 65px;
          }
        }
      }
    }

    .right {
      width: calc(50% - 1rem);
      display: flex;
      flex-direction: column;
      row-gap: 2rem;

      img {
        width: 100%;
        border-radius: 10px;
      }

      .right-inner {
        display: flex;
        column-gap: 2rem;
        height: 100%;

        .right-text {
          height: max-content;
          text-align: center;
          border-radius: 10px;
          font-size: 28px;
          font-weight: 500;
          padding: 2rem;
          width: calc(60% - 1rem);
          background-color: #E30000;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .right-radio {
          width: calc(40% - 1rem);
          display: flex;
          align-items: center;
          justify-content: center;

          #sc-player {
            height: 100px;
            margin-top: -10px;
            display: flex;
            justify-content: center;
            align-items: center;

            .box-container {
              background-color: transparent !important;
            }
          }
        }
      }
    }
  }

  section#over-ons {
    .page-padding {
      display: block;

      p {
        font-size: 28px;
      }
    }
  }

  section#uitzendingen {
    margin-bottom: 4rem;
    .page-padding {
      display: flex;
      flex-direction: column;
      row-gap: 2rem;

      h2 {
        font-size: 50px;
        text-transform: none;
      }

      .uitzendingen {
        display: flex;
        column-gap: 2rem;
        flex-wrap: wrap;

        iframe {
          width: 250px;
          height: 250px;
        }
      }

      .more {
        display: flex;
        justify-content: flex-end;
        width: 100%;

        .more-button {
          display: flex;
          align-items: center;
          column-gap: 1rem;
          padding-top: 2rem;
          text-align: end;
          color: white;
          text-decoration: none;
          font-weight: bold;
          font-size: 30px;
  
          svg {
            width: 30px;
            height: 30px;
          }
  
          &:hover {
            color: #E30000;
            svg {
  
              path {
                fill: #E30000;
              }
            }
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 850px) {
  .home {
    .page-padding {
      padding-top: 5rem;
      flex-direction: column-reverse;

      .left {
        width: calc(100% - 2rem);
        margin: 1rem;

        h1 {
          font-size: 28px;
          margin-bottom: 0.3rem;
        }

        p {
          font-size: 1rem;
        }

        .luister {
          padding-top: 2rem;
          display: flex;
          flex-direction: column;
          align-items: start;
          row-gap: 1rem;

          .images {
            display: flex;
            column-gap: 1rem;

            img {
              width: 50px;
            }
          }
        }
      }

      .right {
        width: calc(100% - 2rem);
        margin: 1rem;

        img {
          width: 100%;
        }

        .right-inner {

          .right-text {
            width: 100%;
            font-size: 20px;
            padding: 1rem;
          }

          .right-radio {

            #sc-player {
              margin-top: 0;
              width: 100% !important;
            }
          }
        }
      }
    }

    section#over-ons {
      margin: 5rem 0;
      .page-padding {
        width: calc(100% - 2rem);
        margin: 1rem;

        h2 {
          font-size: 28px;
        }

        h3 {
          font-size: 22px;
        }

        p {
          font-size: 16px;
        }
      }
    }

    section#uitzendingen {
      .page-padding {
        width: calc(100% - 2rem);
        margin: 1rem;

        h2 {
          font-size: 28px;
        }

        .uitzendingen {
          display: flex;
          column-gap: 1rem;
          flex-wrap: nowrap;
          overflow-x: scroll;

          iframe {
            width: 250px;
            height: 250px;
          }
        }

        .more {
          .more-button {
            font-size: 20px;
            color: #E30000;

            svg {
              path {
                fill: #E30000;
              }
            }
          }
        }
      }
    }
  }
}