@media (min-width: 1025px)
{
      .calendar-event {
              margin: 0;
              padding: 30px;

              font-family: Arial, Helvetica, sans-serif;

              background: #f5f5f5;
      }


/* =================================
   MAIN CONTAINER
   ================================= */

      .calendar-container {

          width: 100%;
          max-width: 1100px;

          margin: 0 auto;

          display: flex;

          gap: 30px;

      }


/* =================================
   LEFT SIDE
   ================================= */

      .months-section {

          width: 40%;

      }


/* Academic year */

      .academic-year {

          text-align: center;

          font-size: 20px;

          font-weight: bold;

          color: #8B0000;

          margin-bottom: 20px;

      }


/* =================================
   MONTH GRID
   ================================= */

      .month-grid {

          display: grid;

          grid-template-columns: repeat(4, 1fr);

          gap: 10px;

      }


/* Month button */

      .month-button {

          width: 100%;

          min-height: 75px;

          padding: 10px 5px;

          border: none;

          border-radius: 8px;

          background: white;

          color: #333;

          cursor: pointer;

          box-shadow: 0 2px 6px rgba(0,0,0,0.15);

      }


/* Month */

      .month-name {

          display: block;

          font-size: 16px;

          font-weight: bold;

      }


/* Year */

      .month-year {

          display: block;

          margin-top: 6px;

          font-size: 14px;

      }


/* Hover */

      .month-button:hover {

          background: #ffe5e5;

      }


/* Active */

      .month-button.active {

          background: #8B0000;

          color: white;

      }


/* =================================
   RIGHT SIDE
   ================================= */

      .events-section {

          width: 60%;

          min-height: 400px;

          background: white;

          border-radius: 10px;

          overflow: hidden;

          box-shadow: 0 3px 10px rgba(0,0,0,0.15);

      }


/* Event heading */

      .event-title {

          padding: 18px 20px;

          background: #8B0000;

          color: white;

          font-size: 22px;

          font-weight: bold;

      }


/* Event content */

      .event-content {

          padding: 25px;

          font-size: 16px;

          line-height: 1.7;

      }


      .event-content ul {

          margin: 0;

          padding-left: 25px;

      }


      .event-content li {

          margin-bottom: 10px;

      }
}

@media (min-width: 768px) and (max-width: 1024px)
{
      .calendar-event {
              margin: 0;
              padding: 30px;

              font-family: Arial, Helvetica, sans-serif;

              background: #f5f5f5;
      }


/* =================================
   MAIN CONTAINER
   ================================= */

      .calendar-container {

          width: 100%;
          max-width: 1100px;

          margin: 0 auto;

          display: flex;

          gap: 30px;

      }


/* =================================
   LEFT SIDE
   ================================= */

      .months-section {

          width: 40%;

      }


/* Academic year */

      .academic-year {

          text-align: center;

          font-size: 20px;

          font-weight: bold;

          color: #8B0000;

          margin-bottom: 20px;

      }


/* =================================
   MONTH GRID
   ================================= */

      .month-grid {

          display: grid;

          grid-template-columns: repeat(3, 1fr);

          gap: 10px;

      }


/* Month button */

      .month-button {

          width: 100%;

          min-height: 75px;

          padding: 10px 5px;

          border: none;

          border-radius: 8px;

          background: white;

          color: #333;

          cursor: pointer;

          box-shadow: 0 2px 6px rgba(0,0,0,0.15);

      }


/* Month */

      .month-name {

          display: block;

          font-size: 16px;

          font-weight: bold;

      }


/* Year */

      .month-year {

          display: block;

          margin-top: 6px;

          font-size: 14px;

      }


/* Hover */

      .month-button:hover {

          background: #ffe5e5;

      }


/* Active */

      .month-button.active {

          background: #8B0000;

          color: white;

      }


/* =================================
   RIGHT SIDE
   ================================= */

      .events-section {

          width: 60%;

          min-height: 400px;

          background: white;

          border-radius: 10px;

          overflow: hidden;

          box-shadow: 0 3px 10px rgba(0,0,0,0.15);

      }


/* Event heading */

      .event-title {

          padding: 18px 20px;

          background: #8B0000;

          color: white;

          font-size: 22px;

          font-weight: bold;

      }


/* Event content */

      .event-content {

          padding: 25px;

          font-size: 16px;

          line-height: 1.7;

      }


      .event-content ul {

          margin: 0;

          padding-left: 25px;

      }


      .event-content li {

          margin-bottom: 10px;

      }
}

/* =================================
   MOBILE
   ================================= */

@media (max-width: 767px) {

      .calendar-event {
              /*margin: 0;*/
              padding: 15px;

              font-family: Arial, Helvetica, sans-serif;

              background: #f5f5f5;
      }

      .calendar-container {

          margin: 0 auto;

          display: flex;

          flex-direction: column;

          gap: 20px;

      }


      .months-section,
      .events-section {

          width: 100%;

      }
      
      .academic-year {

          text-align: center;

          font-size: 20px;

          font-weight: bold;

          color: #8B0000;

          margin-bottom: 20px;

      }

      .month-grid {
          
          display: grid;

          grid-template-columns: repeat(3, 1fr);
          
          gap: 10px;

      }


      .month-button {
          
          width: 100%;

          min-height: 65px;

          padding: 10px 5px;

          border: none;

          border-radius: 8px;

          background: white;

          color: #333;

          cursor: pointer;

          box-shadow: 0 2px 6px rgba(0,0,0,0.15);

      }

      .month-name {
          
          display: block;

          font-size: 14px;

          font-weight: bold;

      }

      .month-year {
          
          display: block;

          margin-top: 6px;

          font-size: 12px;

      }
      
      .month-button:hover {

          background: #ffe5e5;

      }
      .month-button.active {

          background: #8B0000;

          color: white;

      }

/* =================================
   RIGHT SIDE
   ================================= */

      .events-section {

          min-height: 400px;

          background: white;

          border-radius: 10px;

          overflow: hidden;

          box-shadow: 0 3px 10px rgba(0,0,0,0.15);

      }


/* Event heading */

      .event-title {

          padding: 18px 20px;

          background: #8B0000;

          color: white;

          font-size: 22px;

          font-weight: bold;

      }


/* Event content */

      .event-content {

          padding: 25px;

          font-size: 16px;

          line-height: 1.7;

      }


      .event-content ul {

          margin: 0;

          padding-left: 25px;

      }


      .event-content li {

          margin-bottom: 10px;

      }
}