#products {
  background-color: #383838;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid-section {
  @media screen and (min-width: 1200px) {
    grid-template-rows: calc(575px - 5vw);
  }
}

.products {
  width: 1100px;
  max-width: calc(100vw - 16px);

  section {
    margin: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 24px;

    &:first-of-type {
      margin-top: 0;
    }

    h3 {
      font-size: 22px;
      text-align: center;
      margin: 0;
      color: #ff7f50;

      @media screen and (min-width: 650px) {
        text-align: left;
      }
    }

    .products-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;

      @media screen and (min-width: 650px) {
        display: grid;
        grid-template-columns: repeat(auto-fit, 350px);
        align-items: normal;
      }

      .product-card {
        display: flex;
        flex-direction: column;
        border: solid 4px #b1b1b1;
        border-radius: 4px;
        width: 300px;

        @media screen and (min-width: 370px) {
          width: 350px;
        }

        &>a {
          .image-container {
            height: 400px;

            background-color: black;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: #383838 solid 1px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }

        .description-section {
          flex-grow: 1;

          display: flex;
          flex-direction: column;
          gap: 24px;

          padding: 24px;
          background-color: #1e1e1e;

          .description {
            flex-grow: 1;
          }
        }
      }
    }
  }
}