@charset "utf-8";

:root {
  --mainBlack: #262626;
  --radius: 15px;
}

body {
  height: 100vh;
  color: #fff;
  font-family: 'Zen Maru Gothic', serif;
  background: var(--mainBlack);
}

h1 {
  max-width: 1280px;
  width: 90%;
  margin: 0 auto 25px;
  font-size: 115px;
  font-weight: bold;
  pointer-events: none;
}

h2 {
  font-size: 30px;
  font-weight: bold;
}

.container {
  max-width: 1280px;
  width: 90%;
  margin: 0 auto;
}

.item-cont {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.item {
  padding: 20px;
  color: var(--mainBlack);
  text-align: center;
  background: #fff;
  border: 2px solid #fff;
  border-radius: var(--radius);
  display: block;
}

.item li {
  height:265px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.item i::before {
  color: var(--mainBlack);
  font-size: 64px;
}

.item p {
  line-height: 1.5;
  text-align: left;
}

.item,
.item i::before,
.item h2,
.item p {
  transition: all .3s;
}

.item:hover {
  background: transparent;
}

.item:hover i::before,
.item:hover h2,
.item:hover p {
  color: #fff;
}

  @media screen and (max-width: 900px) {
    h1 {
      font-size: 75px;
      margin: 15px 0 40px;
    }

    .item-cont {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 500px) {
    .conteinar {
      width: 100%;
      padding: 0 25px;
    }

    h1 {
      margin-bottom: 25px;
      padding: 0 25px;
      font-size: 42px;
    }

    .item-cont {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 15px
    }

    .item {
      padding: 15px 20px;
      width: 36%;
    }

    .item li {
      height: 250px;
    }

    .item i::before {
      font-size: 50px;
    }
  }