.media-kit-container {
   max-width: 900px;
   margin: 30px auto;
   background: #fff;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   padding: 2em;
 }

 .media-kit-buttons {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: stretch;
   gap: 1em;
   margin: 2em 0;
   flex-wrap: nowrap;
   width: 100%;
   max-width: 100%;
   padding-left: 3em;
   padding-right: 3em;
   box-sizing: border-box;
 }

 .media-kit-title {
   display: inline-block;
   margin: 0;
   font-size: 1.25em;
   text-align: center;
   margin-bottom: 0.2em;
   background: none;
   box-shadow: none;
   font-weight: 400;
   letter-spacing: 2px;
 }

 .media-kit-desc {
   color: #222;
   font-size: 1.2em;
   text-align: center;
 }

 .release-date {
   color: #ff5353;
   font-size: 2.5em;
   text-align: center;
   font-family: 'Coiny', Arial, sans-serif;
   margin: 0;
 }

 .carousel {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 2em;
 }

 .carousel img {
   max-width: 100%;
   max-height: 400px;
   border-radius: 10px;
   box-shadow: 2px 2px 10px #aaa;
   margin-bottom: 1em;
   background: #eee;
 }

 .carousel-controls {
   display: flex;
   justify-content: center;
 }

 .carousel-controls button {
   background-color: #18ba30;
   color: #ffffff;
   border-radius: 8px;
   padding: 0px 8px;
   font-size: 1.15em;
   cursor: pointer;
   margin: 0 0.5em;
 }

 #carousel-counter {
   display: flex;
   align-items: center;
   font-family: 'Coiny', Arial, sans-serif;
   font-size: 1.8em;
   color: #222;
   justify-content: center;
   margin: 0 0.5em;
 }

 .trailer {
   display: flex;
   justify-content: center;
 }

 @media (max-width: 700px) {
   .media-kit-container {
     padding: 0.5em;
   }

   .carousel img {
     max-height: 200px;
   }
 }

 button {
   --button-color: #ff6b35;
   --shadow-size: 6px;

   position: relative;
   display: inline-block;
   padding: 10px 28px 6px 28px;

   font-family: 'Coiny', Arial, sans-serif;
   font-size: 18px;
   text-transform: uppercase;
   letter-spacing: 1px;

   color: white;
   text-decoration: none;

   border: 3px solid black;
   border-radius: 10px;

   /* Solid body color */
   background-color: var(--button-color);

   /* Repeating faded dot pattern */
   background-image:
     radial-gradient(rgba(255, 255, 255, 0.14) 35%,
       transparent 10%);


   background-size: 14px 14px;


   /* Hard shadow */
   box-shadow:
     var(--shadow-size) var(--shadow-size) 0 black;

   cursor: pointer;
   transition:
     transform 0.08s ease,
     box-shadow 0.08s ease;
 }

 /* Hover */
 .button:hover {
   transform: translate(2px, 2px);
   box-shadow: calc(var(--shadow-size) - 2px) calc(var(--shadow-size) - 2px) 0 black;
 }

 /* Pressed */
 .button:active {
   transform: translate(var(--shadow-size), var(--shadow-size));
   box-shadow: 0 0 0 black;
 }

 button:hover {
   filter: brightness(1.15);
   transform: translateY(-2px);
   box-shadow: 8px 8px 0px #222222;
 }

 .download-kit {
   --button-color: #ff6b35;
 }

 .steam-link {
   --button-color: #409cff;
 }