.ag-format-container {
      width: 100%;
      max-width: 1142px;
      margin: 0 auto;
      padding: 0 15px;
      /* optional padding for breathing room */
  }
    .ag-courses_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 50px 0;
        gap: 30px;
    }

    .ag-courses_item {
        flex: 1 1 calc(33.333% - 30px);
        min-width: 300px;
        max-width: calc(33.333% - 30px);
        height: 250px;
        overflow: hidden;
        border-radius: 20px;
    }

    .ag-courses-item_link {
        display: block;
        height: 100%;
        padding: 20px;
        background-color: rgba(0, 23, 62, .97);
        position: relative;
        color: white;
        text-decoration: none;
    }

    .ag-courses-item_title {
        min-height: 60px;
        margin-bottom: 20px;
        font-weight: bold;
        font-size: 18px;
        color: #FFF;
        z-index: 2;
        position: relative;
    }

    .ag-courses-item_date-box {
        font-size: 14px;
        z-index: 2;
        position: relative;
    }

    .ag-courses-item_date {
        font-weight: bold;
        color: #f9b234;
        transition: color .5s ease;
    }

    .ag-courses-item_link:hover .ag-courses-item_date {
        color: #fff;
    }

    .ag-courses-item_bg {
        height: 100px;
        width: 100px;
        border-radius: 50%;
        background-color: #f9b234;
        position: absolute;
        top: -50px;
        right: -50px;
        z-index: 1;
        transition: transform .5s ease;
    }

    .ag-courses-item_link:hover .ag-courses-item_bg {
        transform: scale(10);
    }

    .ag-courses_item:nth-child(2n) .ag-courses-item_bg {
        background-color: #3ecd5e;
    }

    .ag-courses_item:nth-child(3n) .ag-courses-item_bg {
        background-color: #e44002;
    }

    .ag-courses_item:nth-child(4n) .ag-courses-item_bg {
        background-color: #952aff;
    }

    .ag-courses_item:nth-child(5n) .ag-courses-item_bg {
        background-color: #cd3e94;
    }

    .ag-courses_item:nth-child(6n) .ag-courses-item_bg {
        background-color: #4c49ea;
    }

    @media only screen and (max-width: 979px) {
        .ag-courses_item {
            flex: 1 1 calc(50% - 20px);
        }

        .ag-courses-item_title {
            font-size: 16px;
        }
    }

  @media only screen and (max-width: 768px) {
      .ag-courses_item {
          flex: 1 1 100%;
          max-width: 100%;
      }

      .ag-courses_box {
          padding: 30px 0;
          gap: 20px;
      }
  }