@import url("https://fonts.googleapis.com/css?family=Inter:300&display=swap");

.wrapper {
   position: relative;
   overflow: hidden;
   height: 100vh;
   font-family: "Inter";
   font-weight: 300;
}
.page {
   background-color: #B9D4E0;
   height: 100%; 
   position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
}
.page__section{
   display: grid;
   grid-template-columns: 0.9375rem 1fr minmax(auto, 67.625rem) 1fr 0.9375rem;
   flex-grow: 1;
}
.page__container{
   grid-column: 1 / 6;
   padding-top: 4.6875rem;
}
.page__title {
   color: #506B76;
   font-size: 3.875rem;
   flex-basis: content;
   flex-shrink: 0;
   align-self: center;
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
   justify-content: space-between;
}
.page__title span {
   color: #7E98A4;
   display: block;
  }
.page__image {
   aspect-ratio: 1 / 1;
   max-width: 689px;
   position: relative;
}
.page__image img{
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: scaleX(-1);
}
.page__block-link{
   display: grid;
   grid-template-columns: 0.9375rem 1fr minmax(auto, 67.625rem) 1fr 0.9375rem; 
   padding-bottom: 4.6875rem;
}
.page__link {
   grid-column: 3/4;
   color: #506B76;
   font-size: 1.25rem;
   border-bottom: 0.0625rem solid #7E98A4;
   padding-bottom: 0.75rem;
}
.page__link:hover {
   color: #7E98A4;
   transition: color 0.3s ease;
}
@media(min-width: 767.98px){
   .page__container {
      grid-column: 3/6;
      display: flex;
      padding-top: 4.6875rem;
   }
}
@media(max-width: 1024px){
   .page__title {
      font-size: 2.6rem;
   }
}
@media(max-width: 767.98px){
   .page__title{
      align-items: center;
   }
   .page__container{
      align-content: center;
      padding-left: 0.9375rem;
      padding-right: 0.9375rem;
   }
}
@media(max-width: 767.98px){
   .page__title {
      font-size: 2rem;
   }
}