/* HOME: sections unique to the homepage (content/home.html) */

main > .showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--text-gap);
}

main > .showcase > header {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    gap: calc(var(--text-gap) * 2);
}

main > .showcase > header > p {
    color: var(--muted-color);
}

main > .showcase > header > .tags {
    display: flex;
    flex-direction: row;
    gap: var(--text-gap);
}

main > .showcase > header > .tags > .tag > h6 {
    color: var(--muted-color);
}

main > .showcase > header > .tags > .tag > p {
    color: var(--accent-color);
}

main > .showcase > header > .tags > .tag > .pulse {
    margin-top: 6px;
    margin-left: 12px;
}

/* box and caption come from the figure component (components.css) */
main > section > figure > img {
    height: 250px;
    object-fit: contain;
}

main > .about {
    display: flex;
    flex-direction: column;
    gap: var(--text-gap);
}

main > .about > p {
    color: var(--muted-color);
}

main > .links {
    padding: 0;
}

main > .links > header {
    padding: calc(var(--padding-y) * 3) var(--padding-x);
}

main > .links > .rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border-top: var(--hashmark);
}

main > .links > .rail > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
}

main > .links > .rail > a:not(:last-child) {
    border-right: var(--hashmark);
}

main > .links > .rail > a > svg {
    width: 50%;
    aspect-ratio: 1 / 1;
    min-width: min(96px, 100%);
    max-width: 144px;
    padding: var(--padding-y) var(--padding-x);
    fill: currentColor;
    color: var(--muted-color);
}

@media (max-width: 768px) {
    main > .showcase {
        grid-template-columns: 1fr;
        height: auto;
    }
}