main.event{
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   gap: var(--size-2);
   margin-top: var(--size-5);

   & .layout{
      display: grid;
      grid-template-columns: auto 50vw;
      grid-template-rows: repeat(2, max-content);
      gap: var(--size-5);
      grid-column-gap: var(--size-1);
      width: 100%;


      & .title-wrapper{
         grid-column: 1/3;
         grid-row: 1;
      }



      > section.content-wrapper{
         display: flex;
         flex-direction: column;
         gap: var(--size-6);
         width: 100%;
         max-width: 640px;

         grid-column: 1;
         grid-row: 2;

      }

      img{
         height: auto;
         max-height: 50vh; 
         /* max-width: 580px; */
         object-fit: contain;
         object-position: top left;
         width: 100%;

         grid-column: 2;
         grid-row: 2;

      }
   }
}




@media only screen and (max-width: 1080px ){
   main.event{
      flex-direction: column;

      & .layout{
         display: flex;
         flex-direction: column;
      }

      /* > img{
         height: auto;
         max-height: none;
         max-width: 100%;
         object-fit: contain;
         object-position: top left;
         width: 100%;
   } */
   }
}


@media only screen and (max-width: 678px ){
	main.event{
      & .layout{
         & img{
            max-height: none;
            width: 100%;
         }
      }
   }
}