:root {
  --color-white: #ffffff;
  --color-black: #000000;

  --background-color: var(--color-white);

  --font-small-size: 20rem;
  --font-big-size: 36rem;
  --grid-size: 20rem;
  --margin-between-block: 72rem;
}

@media (max-width: 736px) {
  :root {
    --font-big-size: 24rem;
    --margin-between-block: 56rem;
  }
}

* {
  margin: 0;
  padding: 0;
}

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

html {
  font-size: calc(1em * 0.0625);
  box-sizing: border-box;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

main {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1em;
  margin: 0;
  font-weight: normal;
}

a {
  background-color: transparent;
  text-decoration: none;
}

b,
strong {
  font-weight: normal;
}

img {
  display: block;
  border-style: none;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: var(--color-black);
}

.Header {
  display: flex;
  justify-content: space-between;
  padding: 20rem 18rem var(--margin-between-block) 18rem;
}

.Header-logo {
  font-size: var(--font-small-size);
}

.Header-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16rem;
}

.Header-link {
  font-size: var(--font-small-size);
  line-height: 1;
  color: var(--color-black);
}

.BlockContent {
  margin: 0 var(--grid-size) var(--margin-between-block) var(--grid-size);
  font-size: var(--font-big-size);
  line-height: 1.1112;
}

.BlockContent-paragraph {
  opacity: 0;
}

.BlockContent-paragraph:not(:last-child) {
  margin-bottom: 32rem;
}

.BlockContent-link {
  color: var(--color-black);
}

.BlockImages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: var(--grid-size);
  margin: 0 var(--grid-size) var(--margin-between-block) var(--grid-size);
}
@media (max-width: 736px) {
  .BlockImages {
    grid-template-columns: 1fr;
  }
}

.BlockImages-image {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  clip-path: inset(100% 0% 0% 0%);
}

.link {
  position: relative;
  display: inline-block;
  text-shadow: 2rem 0 var(--background-color), -2rem 0 var(--background-color),
    0 2rem var(--background-color), 0 -2rem var(--background-color),
    1rem 1rem var(--background-color), -1rem -1rem var(--background-color),
    1rem -1rem var(--background-color), -1rem 1rem var(--background-color);
}

.link:before {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: 0;
  width: 100%;
  height: 2rem;
  background-color: var(--color-black);
  z-index: -1;
  transition: 0.25s width cubic-bezier(0.77, 0, 0.175, 1);
}
.link:after {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: 0;
  width: 0%;
  height: 2rem;
  background-color: var(--color-black);
  z-index: -1;
  transition: 0.25s 0.15s width cubic-bezier(0.77, 0, 0.175, 1);
}

.link:hover:before {
  width: 0;
  right: 0;
  left: unset;
}

.link:hover:after {
  width: 100%;
}

.split-line {
  display: block;
  overflow: hidden;
}

.split-line > div {
  transform: translateY(100%);
}