#GENRE {
  background: #000;
  .section-title-black {
    svg {
      height: 1000px;
    }
  }

  .genres-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 950px;
    margin: 0 auto;

    .genre-container {
      .text-container-container {
        position: absolute;
        width: 450px;
        height: 250px;
        .text-container {
          width: 190px;
          height: 200px;
          position: absolute;
          padding: 10px 20px;
          h4 {
            font-family: "Fugaz One";
            font-size: 38px;
            color: white;
          }
          h4:nth-child(2) {
            margin-top: -10px;
            color: transparent;
            -webkit-text-stroke: 0.5px #fff;
          }
          h4:nth-child(3) {
            margin-top: -10px;
            color: transparent;
            -webkit-text-stroke: 0.5px #fff;
          }
          @media (max-width: 550px) {
            h4 {
              font-size: 28px;
              margin-left: 40px;
            }
            h4:nth-child(2) {
              margin-top: 0;
            }
            h4:nth-child(3) {
              margin-top: 0;
            }
          }
        }
        @media (max-width: 550px) {
          .text-container-container {
            width: 30px;
            height: 200px;
          }
        }
      }

      .genre-line {
        position: absolute;
        width: 300px;
        height: 150px;
        border-right: 3px #fff solid;
        border-bottom: 3px #fff solid;

        .genre-line-left-container {
          position: absolute;
          display: flex;
          align-items: end;
          width: 100%;
          height: 100%;
          .genre-line-left {
            height: 15px;
            border-left: 3px solid #fff;
          }
        }

        .genre-line-top-container {
          position: absolute;
          display: flex;
          justify-content: end;
          width: 100%;
          height: 100%;
          .genre-line-top {
            width: 180px;
            border-top: 3px solid #fff;
          }
        }
      }

      @media (max-width: 550px) {
        .genre-line {
          width: 230px;
          height: 130px;
          .genre-line-top-container {
            .genre-line-top {
              width: 165px;
            }
          }
        }
      }

      .img-container {
        width: 450px;
        height: 250px;
        border: 3px white solid;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      @media (max-width: 550px) {
        .img-container {
          width: 350px;
          height: 200px;
        }
      }
    }
  }
}