.conversations-page {
  padding: 0 2.778vw 1.389vw;
  font-family: "Abolition";
}

.page-title {
  font-size: 4.167vw;
  line-height: 4.167vw;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 1.944vw;
  letter-spacing: 0;
  color: #bbbbbb;
}

.conversations-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.389vw;
}

.main-content {
  width: 100%;
}

.main-content:hover .main-title {
  color: #fe4622;
}

.main-content-img {
  position: relative;
  overflow: hidden;
}

.main-img {
  width: 100%;
  display: block;
}

.main-name-box {
  position: absolute;
  left: 1.667vw;
  bottom: 1.667vw;
  display: flex;
  align-items: center;
}

.main-name {
  background: #91ea00;
  color: #000;
  font-size: 2.222vw;
  font-family: "Abolition";
  line-height: 2.222vw;
  font-weight: 400;
  text-transform: uppercase;
  padding: 0.833vw 0.833vw 1.111vw 0.833vw;
}

.sigma-svg {
  width: 5.8vw;
  height: 100%;
  padding: 1.563vw 0.313vw;
  background: #fff;
}

.main-content-info {
  margin-top: 0.556vw;
}

.main-title {
  font-size: 6.944vw;
  line-height: 6.944vw;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 1.667vw;
  transition: 0.4s;
}

.main-content-actions {
  display: flex;
  align-items: center;
  gap: 1.111vw;
}

.main-content-actions a {
  position: relative;
  padding: 0.694vw 1.667vw 1.111vw;
  background: #fff;
  color: #000;
  font-size: 1.667vw;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: 0.4s;
}

.main-content-actions a:hover {
  color: #ff3b1f;
}

.main-content-actions a:first-child {
  background: #ff3b1f;
  color: #fff;
  padding-left: 3.264vw;
}

.main-content-actions a:first-child:hover {
  color: #000;
}

.main-content-actions .play-vector {
  left: 1.667vw;
  width: 1vw;
  height: 1vw;
}

.date-span {
  font-family: "Neue Machina";
  font-size: 0.972vw;
  font-weight: 500;
  line-height: 1.25vw;
  text-transform: uppercase;
  letter-spacing: 0;
}

.secondary-content-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.389vw;
}

.secondary-card {
  width: 100%;
}

.secondary-card:hover .secondary-title {
  color: #fe4622;
}

.secondary-img-box {
  position: relative;
  overflow: hidden;
}

.secondary-img-box img {
  width: 100%;
  display: block;
}

.secondary-play {
  position: absolute;
  top: 0.833vw;
  right: 0.833vw;
  width: 2.778vw;
  height: 2.778vw;
  border: none;
  background: #ff3b1f;
  cursor: pointer;
}

.secondary-play:hover .play-vector {
  background: #000;
}

.play-vector {
  position: absolute;
  left: 50%;
  top: 50%;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  transform: translateX(-50%) translateY(-50%);
  background-color: #fff;
  width: 1vw;
  height: 1vw;
  transition: 0.4s;
}

.secondary-name-box {
  position: absolute;
  left: 0.833vw;
  bottom: 0.833vw;
  display: flex;
  align-items: center;
}

.secondary-name-box p {
  background: #050909;
  color: #fff;
  font-size: 0.972vw;
  letter-spacing: 3%;
  line-height: 100%;
  font-weight: 400;
  padding: 0.486vw 0.694vw 0.694vw;
  text-transform: uppercase;
}

.secondary-name-box img {
  width: 2.222vw;
  height: 2.222vw;
  background: #fff;
  padding: 0 0.208vw;
}

.news-title {
  font-size: 2.778vw;
  line-height: 2.778vw;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.secondary-title {
  margin: 0.556vw 0 0.556vw;
  transition: 0.4s;
}

/* More Conversations */

.conversation-more {
  padding-top: 2.778vw;
}

.conversation-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.222vw 1.389vw;
}

@media (max-width: 960px) {

  .conversations-page {
    padding: 0 5.333vw 5.333vw;
  }

  .page-title {
    font-size: 10.667vw;
    line-height: 10.667vw;
    margin-bottom: 5.333vw;
  }

  .conversations-content {
    display: flex;
    flex-direction: column;
    gap: 5.333vw;
  }

  .main-content {
    width: 100%;
  }

  .sigma-svg {
    display: block;
    width: 9.6vw;
    height: 11.2vw;
    padding: 2.821vw 0.769vw;
  }

  .main-name-box {
    left: 3.2vw;
    bottom: 3.2vw;
  }

  .main-name {
    font-size: 6.4vw;
    line-height: 8vw;
    padding: 1.133vw 1.6vw 2.133vw;
  }

  .main-content-info {
    margin-top: 2.133vw;
  }

  .main-title {
    font-size: 16vw;
    line-height: 16vw;
    margin-bottom: 5.333vw;
  }

  .main-content-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 3.2vw;
  }

  .main-content-actions a {
    font-size: 6.4vw;
    padding: 2.667vw 6.4vw 4.267vw;
  }

  .main-content-actions a:first-child {
    padding-left: 8.718vw;
  }

  .main-content-actions .play-vector {
    width: 4vw;
    height: 4vw;
    left: 4.8vw;
  }

  .main-content-actions .date-span {
    width: 100%;
  }

  .date-span {
    font-size: 3.2vw;
    line-height: 3.733vw;
  }

  .secondary-content-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5.333vw 3.2vw;
  }

  .secondary-card {
    width: 100%;
  }

  .secondary-img-box img {
    width: 100%;
    display: block;
  }

  .secondary-play {
    top: 1.067vw;
    right: 1.067vw;
    width: 10.667vw;
    height: 10.667vw;
  }

  .secondary-play .play-vector {
    width: 4vw;
    height: 4vw;
  }

  .secondary-name-box {
    height: 8.533vw;
    margin-top: 2.133vw;
    position: static;
  }

  .secondary-name-box p {
    background: #292929;
    font-size: 3.733vw;
    padding: 1.6vw 2.667vw 2.667vw 2.667vw;
  }

  .secondary-name-box img {
    width: 8vw;
    height: 8vw;
    padding: 1.282vw 0.513vw;
  }

  .secondary-title {
    font-size: 8.533vw;
    line-height: 8.533vw;
    margin: 2.133vw 0 2.133vw;
  }

  .conversation-more {
    padding-top: 5.333vw;
  }

  .conversation-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5.333vw 3.2vw;
  }
}