/*
 * Original Design Specifications
 * Target: > 1800px
 * Test Resolution: 1920 x 1080
 */
:root {
  --project-list-item-number-min-width: 5rem;
  --project-list-flex-direction: column;
  --project-list-item-padding-y: 0.6rem;
  --project-list-item-link-padding: 1.8rem 5.5rem 1.8rem 3.2rem;
  --project-list-item-link-font-size: 2.9rem;
  --project-list-item-link-min-height: 11.7rem;
  --project-list-item-link-gap: 6rem;
  --project-list-item-info-gap: 1rem;
  --project-list-item-icon-dimensions: 2rem;
}

/*
 * 2XL Media Query (1536px)
 * Target: 1799px > 1536px
 * Test Resolution: 1536 x 864
 */
@media screen and (max-width: 1799px) {
  :root {
    --project-list-item-number-min-width: 4.2rem;
    --project-list-item-padding-y: 0.55rem;
    --project-list-item-link-padding: 1.6rem 4.5rem 1.6rem 2.1rem;
    --project-list-item-link-font-size: 2.5rem;
    --project-list-item-link-min-height: 10.2rem;
    --project-list-item-link-gap: 4.5rem;
    --project-list-item-info-gap: 1rem;
    --project-list-item-icon-dimensions: 1.8rem;
  }
}

/*
 * XL Media Query (1280px)
 * Target: 1535px > 1280px
 * Test Resolution: 1280 x 720
 */
@media screen and (max-width: 1535px) {
  :root {
    --project-list-item-padding-y: 0.5rem;
    --project-list-item-link-padding: 1.4rem 4rem 1.4rem 2.1rem;
    --project-list-item-link-font-size: 2.2rem;
    --project-list-item-link-min-height: 8.9rem;
    --project-list-item-link-gap: 3.5rem;
    --project-list-item-icon-dimensions: 1.6rem;
  }
}

/*
 * L Media Query (1024px)
 * Target: 1279px > 1024px
 * Test Resolution: 1024 x 768
 */
@media screen and (max-width: 1279px) {
  :root {
    --project-list-item-number-min-width: 3.5rem;
    --project-list-item-padding-y: 0.45rem;
    --project-list-item-link-padding: 1.2rem 3rem 1.2rem 2rem;
    --project-list-item-link-font-size: 2rem;
    --project-list-item-link-min-height: 8rem;
    --project-list-item-link-gap: 2.5rem;
    --project-list-item-icon-dimensions: 1.4rem;
  }
}

/*
 * M Media Query (768px)
 * Target: 1023px > 768px
 * Test Resolution: 768 x 1024
 */
@media screen and (max-width: 1023px) {
  :root {
    --project-list-item-number-min-width: 3rem;
    --project-list-item-padding-y: 0.5rem;
    --project-list-item-link-padding: 1rem 2.5rem 1rem 1.5rem;
    --project-list-item-link-font-size: 1.8rem;
    --project-list-item-link-min-height: 7rem;
    --project-list-item-link-gap: 2rem;
    --project-list-item-icon-dimensions: 1.2rem;
  }
}

/*
 * S Media Query (640px)
 * Target: < 767px
 * Test Resolution: 390 x 844
 */
@media screen and (max-width: 767px) {
  :root {
    --project-list-item-number-min-width: 2.5rem;
    --project-list-item-padding-y: 0.5rem;
    --project-list-item-link-padding: 1.2rem 2rem 1.2rem 1.5rem;
    --project-list-item-link-font-size: 1.6rem;
    --project-list-item-link-min-height: 6rem;
    --project-list-item-link-gap: 1.5rem;
    --project-list-item-icon-dimensions: 1.6rem;
  }
}

.project-list {
  display: flex;
  flex-direction: var(--project-list-flex-direction);
}

.project-list-item {
  padding: var(--project-list-item-padding-y) 0;
}

.project-list-item:not(:first-of-type) {
  border-top: 1px solid var(--theme-color-horizontal-line);
}

.project-list-item:last-child {
  padding-bottom: 0;
}

.project-list-item-link {
  display: flex;
  justify-content: space-between;
  background-color: transparent;
  padding: var(--project-list-item-link-padding);
  border-radius: 1.4rem;
  font-size: var(--project-list-item-link-font-size);
  line-height: 1.4;
  gap: var(--project-list-item-link-gap);
  align-items: center;
  min-height: var(--project-list-item-link-min-height);
}

.project-list-item-info {
  display: flex;
  gap: var(--project-list-item-info-gap);
}

.project-list-item-number {
  min-width: var(--project-list-item-number-min-width);
}

.project-list-item-icon {
  visibility: hidden;
  width: var(--project-list-item-icon-dimensions);
  height: var(--project-list-item-icon-dimensions);
}

.project-list-item-icon > svg > path {
  fill: var(--theme-color-border);
}

.project-list-item-link:hover,
.project-list-item-link:focus {
  background-color: var(--theme-color-white);
}

.project-list-item-link:hover .project-list-item-icon,
.project-list-item-link:focus .project-list-item-icon {
  visibility: visible;
}