* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  --black: #020202;
  --white: #FFFFFF;
  --red: #ED2232;
  --yellow: #FAD200;
}

body {
  color: var(--black);
  font-family: 'VT323', monospace;
  font-size: 18px;
  background-image: url(../images/noise.png);
  overflow-x: clip;
  max-width: 100vw;
}

.header {
  display: flex;
  justify-content: center;
  padding: 50px 0;

  @media (max-width: 767px) {
    margin-bottom: 30px;
  }

  img {
    width: 220px;
    height: auto;

    @media (max-width: 767px) {
      width: 150px;
    }
  }
}

.wrapper {
  overflow-x: clip;
  max-width: 100vw;
  min-height: calc(100vh - 189px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;

  @media (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.item {
  position: relative;
  padding: 70px 24px;
  border: 2px solid var(--black);
  color: var(--black);
  text-decoration: none;

  @media (max-width: 767px) {
    border-bottom: 0;
    padding: 50px 24px;
  }

  &:last-child {
    @media (max-width: 767px) {
      border-bottom: 2px solid var(--black);
    }
  }

  &:nth-child(1) {
    .image__small {
      top: 0;
      transform: translate(-40%, -70%);

      @media (max-width: 767px) {
        transform: translate(-60%, -70%);
      }
    }

    .image__small--2 {
      width: 200px;
      top: auto;
      bottom: 0;
      transform: translate(40%, 30%);
    }
  }

  &:nth-child(2) {
    .image__small {
      top: 0;
      right: 0;
      transform: translate(0%, -60%);

      @media (max-width: 767px) {
        transform: translate(40%, -30%);
      }
    }

    .image__small--2 {
      width: 150px;
      top: auto;
      bottom: 0;
      left: 0;
      transform: translate(-70%, 30%);
    }
  }

  &:nth-child(3) {
    .image__small {
      top: 0;
      transform: translate(-80%, -40%);
      width: 120px;

      @media (max-width: 767px) {
        transform: translate(-85%, -20%);
      }
    }

    .image__small--2 {
      width: 150px;
      right: 0;
      transform: translate(35%, -70%);
    }
  }

  &:nth-child(4) {
    .image__small {
      bottom: 0;
      right: 0;
      transform: translate(50%, 20%);

      @media (max-width: 767px) {
        transform: translate(60%, 40%);
      }
    }

    .image__small--2 {
      left: 0;
      width: 180px;
      transform: translate(-70%, -85%);
    }
  }

  @media (hover: hover) {
    &:hover {
      color: var(--white);
      z-index: 2;
  
      .image__big, .image__small--2 {
        opacity: 1;
        rotate: 0deg;
      }

      .image__small--2 {
        rotate: 0deg;
      }

      .image__big {
        transform: rotate(-1.5deg);
      }
  
      .link {
        color: var(--white);
  
        &:after {
          background-image: url(../images/arrow-link-white.svg);
        }
      }
    }
  }
}

.image__big {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(0deg);
  z-index: -1;

  opacity: 0;
  transition: all 0.3s ease-in-out;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.image__small {
  position: absolute;
  object-fit: cover;
  width: 140px;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.image__small--2 {
  width: 170px;
  right: 0;
  bottom: 0;
  opacity: 0;
  rotate: -3deg;
  transition: all 0.3s ease-in-out;
}

@media (hover: hover) {
  .grid:has(.item:hover) .item:not(:hover) .image__small {
    opacity: 0;
  }
}

h2 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 32px;
  line-height: 1.2;
  margin-bottom: 12px;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: var(--red);
  text-decoration: none;
  font-size: 18px;
  line-height: 1.2;
  margin-top: 18px;
  transition: color 0.3s ease-in-out;

  &:after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background-image: url(../images/arrow-link.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 3px;
    transition: background-image 0.3s ease-in-out;
  }
}

.footer {
  background-color: var(--yellow);
  padding: 20px 0;
  margin-top: 80px;

  @media (max-width: 767px) {
    padding: 30px 0;
  }

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;

    @media (max-width: 767px) {
      justify-content: center;
    }
  }

  a {
    color: var(--black);
    text-decoration: none;
  }

  ul {
    list-style: none;
    display: flex;
    column-gap: 24px;
    row-gap: 10px;
    justify-content: end;
    align-items: center;
    flex-wrap: wrap;

    @media (max-width: 767px) {
      justify-content: center;
    }
  }
}