.page-media {
  margin-bottom: 80px;

  .view-filters {
    margin-top: 40px;
    margin-bottom: 80px;
    .form--inline {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap:32px;

      .form-type-select{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap:10px;
      }

      .form-item,
      .form-actions {
        margin:0
      }

      .select {
        width : 150px;
        margin: 0;
        /* border-radius: 15px 15px 0 0; */
      }
      .select::after {
        background-color: var(--color-brand);
      }

      input{
        margin: 0;
        border-radius: 20px;
        color: var(--color-dark);
        text-align: center;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        display:inline-block;
        border-radius: 23.5px;
        padding: 12px 44px;
        background-color: var(--color-white);
        border: 2px solid black;
      }
      input:hover {
        background-color: var(--color-brand);
        border-color: var(--color-brand);
      }
    }
  }

  .view-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 32px;
    column-gap: 40px;

    .media-card {
      background-color: white;
      border-radius: 20px;
      position:relative;
      display: flex;
      min-width: 343px;
      max-width: 378px;
      min-height: 489px;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .media-card-content {
        padding: 0 32px;
        padding-bottom: 23px;

        .media-card-date {
          margin-top: 16px;
        }
        .media-card-title {
          color: #32343C;
          font-size: var(--content-size);
          font-weight: 700;
          line-height: 150%; /* 27px */
          margin-top: 8px;
          margin-bottom: 28px;
        }
        .media-card-tag {
          position: absolute;
          bottom: 23px;
          left:32px;

          color: #32343B;
          font-size: 0.875rem;
          font-weight: 600;

          border-radius: 14px;
          border: 2px solid #FFCF4B;
          height: 28px;
          padding: 0 16px;
        }
      }

      img {
        border-radius: 20px 20px 0 0;
      }

      &.media-card--image {
        img {
          border-radius: 20px;
        }
        .media-card-content {
          padding: 0 32px;
          .media-card-tag {
            background-color: white;
          }
        }
      }
    }
  }
}