*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   min-width: 320px;
   background: #ffffff;
}

body {
   margin: 0;
   color: #111111;
   font-family: "TildaSans", Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}

a {
   color: inherit;
   text-decoration: none;
}

.training-page {
   min-height: 100vh;
   background: #ffffff;
}

.training-container {
   width: min(100% - 40px, 1160px);
   margin: 0 auto;
}

.header-container{
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 18px 0 16px;
}

.training-hero {
   padding: 0 0 30px;
}

.training-hero__image {
   display: block;
   width: min(100%, 960px);
   height: auto;
}

.training-formats {
   padding: 0 0 150px;
}

.training-formats__title {
   max-width: 920px;
   margin: 0 auto 90px;
   color: #000000;
   font-size: 42px;
   font-weight: 800;
   line-height: 1.23;
   text-align: center;
}

.training-formats__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 40px;
}

.training-card {
   position: relative;
   display: flex;
   min-height: 300px;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   isolation: isolate;
   outline-offset: 4px;
}

.training-card__image,
.training-card__overlay {
   position: absolute;
   inset: 0;
}

.training-card__image {
   z-index: -2;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   transition: transform 0.25s ease-in-out;
}

.training-card__overlay {
   z-index: -1;
   background: linear-gradient(180deg, rgba(232, 58, 84, 0.4), rgba(6, 90, 166, 0.4));
   transition: opacity 0.25s ease-in-out;
}

.training-card__title {
   display: block;
   padding: 20px 40px;
   color: #ffffff;
   font-size: 36px;
   font-weight: 600;
   line-height: 1.23;
   text-align: center;
}

.training-card:hover .training-card__image,
.training-card:focus-visible .training-card__image {
   transform: scale(1.05);
}

.training-card:hover .training-card__overlay,
.training-card:focus-visible .training-card__overlay {
   opacity: 0.8;
}

@media (max-width: 1200px) {
   .training-formats__title {
      font-size: 38px;
   }

   .training-card__title {
      font-size: 32px;
   }
}

@media (max-width: 960px) {
   .training-formats__title {
      margin-bottom: 60px;
   }

   .training-formats__grid {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 640px) {
   .training-container {
      width: min(100% - 20px, 1160px);
   }

   .training-formats {
      padding-bottom: 90px;
   }

   .training-formats__title {
      font-size: 30px;
   }

   .training-card {
      min-height: 240px;
   }

   .training-card__title {
      padding: 20px;
      font-size: 28px;
   }
}