/* Advoke CV — Grid Layout */

.grid {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}

@media (min-width: 768px) {
  .grid {
    gap: var(--space-6);
  }
}

.grid-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.grid-auto-xs { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.grid-auto-md { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); }
.grid-auto-xl { grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); }

@media (max-width: 767px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .grid-4,
  .grid-5,
  .grid-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-5,
  .grid-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.grid-col-span-1 { grid-column: span 1; }
.grid-col-span-2 { grid-column: span 2; }
.grid-col-span-3 { grid-column: span 3; }
.grid-col-span-4 { grid-column: span 4; }
.grid-col-span-5 { grid-column: span 5; }
.grid-col-span-6 { grid-column: span 6; }
.grid-col-span-full { grid-column: 1 / -1; }

@media (max-width: 767px) {
  .grid-col-span-2,
  .grid-col-span-3,
  .grid-col-span-4,
  .grid-col-span-5,
  .grid-col-span-6 {
    grid-column: span 1;
  }
}

.grid-row-span-1 { grid-row: span 1; }
.grid-row-span-2 { grid-row: span 2; }
.grid-row-span-3 { grid-row: span 3; }

.grid-items-start   { align-items: start; }
.grid-items-center  { align-items: center; }
.grid-items-end     { align-items: end; }
.grid-items-stretch { align-items: stretch; }

.grid-justify-start   { justify-items: start; }
.grid-justify-center  { justify-items: center; }
.grid-justify-end     { justify-items: end; }
.grid-justify-stretch { justify-items: stretch; }

.grid-dense { grid-auto-flow: dense; }

.grid-gap-0  { gap: 0; }
.grid-gap-1  { gap: var(--space-1); }
.grid-gap-2  { gap: var(--space-2); }
.grid-gap-3  { gap: var(--space-3); }
.grid-gap-4  { gap: var(--space-4); }
.grid-gap-6  { gap: var(--space-6); }
.grid-gap-8  { gap: var(--space-8); }
.grid-gap-10 { gap: var(--space-10); }
.grid-gap-12 { gap: var(--space-12); }

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-5);
  width: 100%;
}

@media (min-width: 640px) {
  .template-grid {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .template-grid {
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  }
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-4);
  width: 100%;
}

@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-6);
  }
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-6);
  width: 100%;
}

@media (min-width: 1024px) {
  .hub-grid {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: var(--space-8);
  }
}