.resources-section {
  min-height: 800px;
  padding-bottom: 120px;
  position: relative; /* for shooting star*/

  /* resource text content */
  .resources-info {
    position: relative; /* for lines*/
    margin-bottom: 30px;
    z-index: 10;

    .heading-text {
      margin-bottom: 16px;
    }
    .info-text {
      max-width: 550px;
    }

    /* resource bg stripes styles */
    /* vertical line */
    &:before {
      position: absolute;
      content: "";
      width: 1px;
      height: 720px;
      left: -2rem;
      top: -40px;
      background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0),
        #eaeaea 20%,
        #111111 80%,
        rgba(0, 0, 0, 0)
      );
      filter: brightness(20%);
      transform: translateY(-100px);
    }

    /* horizintal line */
    &:after {
      position: absolute;
      content: "";
      width: 100%;
      height: 1px;
      left: -240px;
      bottom: -32px;
      background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0),
        #eaeaea 20%,
        #111111 80%,
        rgba(0, 0, 0, 0)
      );
      filter: brightness(20%);
      transform: translateY(90deg);
    }
  }

  /* card section */
  .resource-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 480px));
    gap: 20px;
    position: relative;

    /* resource bg stripes below card section */
    /* vertical line */
    &:before {
      position: absolute;
      content: "";
      width: 1px;
      height: 720px;
      right: 15.5%;
      bottom: -180px;
      background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0),
        #eaeaea 20%,
        #111111 80%,
        rgba(0, 0, 0, 0)
      );
      filter: brightness(20%);
      transform: translateY(-100px);
      z-index: 1;
    }

    /* horizintal line */
    &:after {
      position: absolute;
      content: "";
      width: 215%;
      height: 1px;
      right: -80%;
      bottom: 70px;
      background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0),
        #eaeaea 20%,
        #111111 80%,
        rgba(0, 0, 0, 0)
      );
      filter: brightness(20%);
      transform: translateY(90deg);
      z-index: 2;
    }
  }
}

/* card styles */
.resource-cards .card {
  margin-top: 34px;
  height: 320px;
  border: 1px solid #333333;
  border-radius: 20px;
  background: rgba(22, 22, 22, 0.3);
  box-shadow: 0 0 1px #333333;
  backdrop-filter: blur(3px);
  overflow: hidden;
  position: relative;
  transition: background 0.25s ease;
  cursor: pointer;
  z-index: 10;

  &:hover {
    background: rgba(22, 22, 22, 0.2);
  }

  .card-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;

    /* card illustration bg */
    & > svg {
      position: absolute;
      inset: 0;
    }

    /* card's content */
    .card-content {
      margin-top: auto;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      z-index: 10;

      .card-title {
        color: rgba(255, 255, 255, 0.87);
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 500;

        svg {
          width: 20px;
          height: 20px;
        }
      }

      /* card text content */
      .card-info {
        color: var(--text-color);
        font-size: 1.1rem;
        line-height: 1.5rem;
        font-weight: 400;
      }
    }
  }

  /* card hover shine/glow */
  &::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(
      to right,
      transparent 20%,
      #5f5f5f 55%,
      #6b6b6b 50%,
      transparent 100%
    );
    filter: blur(30px);
    opacity: 0.18;
    transform: scale(2) rotate(-45deg) translateX(60%);
  }

  &::after {
    position: absolute;
    content: "";
    width: 95%;
    height: 1px;
    left: 0;
    top: 0px;
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0),
      #333333 10%,
      #666666 80%,
      rgba(0, 0, 0, 0)
    );
  }

  &:nth-of-type(1):hover::before {
    transform: scale(2) rotate(-45deg) translateX(-85%);
    transition: transform 0.5s;
  }

  /* 2nd card's hover effect */
  &:nth-of-type(2):before {
    transform: scale(2) rotate(50deg) translateX(60%);
  }
  &:nth-of-type(2):hover::before {
    transform: scale(2) rotate(50deg) translateX(-85%);
    transition: transform 0.5s;
  }
  &:nth-of-type(2)::after {
    top: unset;
    bottom: 0;
  }
  /* additional style for second card */
  &:nth-of-type(2) {
    .card-wrapper {
      & > svg {
        opacity: 0.3;
        left: unset;
        right: -2px;
      }

      /* gradient mask fade at card's left & right edge */
      &:before,
      &::after {
        position: absolute;
        content: "";
        height: 100%;
        width: 150px;
        z-index: 1;
      }

      &::before {
        left: 0;
        background: linear-gradient(270deg, transparent, rgba(15, 15, 15, 0.9));
      }

      &::after {
        right: 0;
        background: linear-gradient(90deg, transparent, rgba(15, 15, 15, 0.9));
      }
    }
  }
}

.resources-stars {
  .resources-stars-svg {
    position: absolute;
    transform: translateY(-130px);
  }

  .resources-blob {
    position: absolute;
    width: 1000px;
    height: 1000px;
    left: 50%;
    transform: translate(-50%, -240px);
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.1) 0px,
      rgba(161, 252, 70, 0) 71%
    );
    filter: blur(0);
    opacity: 1;
    z-index: 0;

    @media (max-width: 600px) {
      transform: translate(-50%, -340px);
      opacity: 0.6;
    }
  }
}
