/* On desktop, put intro and featured links side-by-side */
@media only screen and (min-width: 768px) {
    #main {display: flex; flex-flow: row wrap; justify-content: center; background: #eee;}
    #main section {flex: 1 100%;}
    #main section[aria-labelledby="Intro"] {flex: 3; max-width: 488px;}
    #main section[aria-labelledby="Featured Links"] {flex: 4; max-width: 652px;}
    #main section[aria-labelledby="Intro"] .row {width: 100%; padding: 1rem;}
    #main section[aria-labelledby="Featured Links"] .row {width: 100%;}
}

/* Featured links styling */
section[aria-labelledby="Featured Links"] .row__feature-links {min-height: 100%; flex-direction: column; justify-content: space-evenly; padding: 0; background: #eee;}
.row__feature-links .row__feature-links__button {display: grid; grid-template-columns: 30% 70%; justify-items: center; gap: 0.5rem; padding: 1.5rem; margin: 0.5rem 1rem; background: #fff; box-shadow: 5px 5px 1rem #888; transition: box-shadow 0.2s;}
.row__feature-links__button:hover {box-shadow: 0px 0px 0.7rem #ccc; cursor: default !important;}
.row__feature-links__button:after {display: none;}
.row__feature-links__button svg {margin-bottom: 0 !important;}
.row__feature-links__button > a {grid-row: 1 / 2; grid-column: 1 / 2; font-weight: normal !important; text-decoration: none !important;}
.row__feature-links__button > a:hover {text-decoration: underline !important;}
.row__feature-links__button .featured-link-description {grid-row: 1 / 2; grid-column: 2 / 3; font-family: acumin-pro,"Franklin Gothic",sans-serif; font-size: 1rem;}
.row__feature-links__button .featured-link-description p {margin: 1rem 0;}
.row__feature-links__button .featured-link-description p:first-child {margin-top: 0;}
.row__feature-links__button .featured-link-description p:last-child {margin-bottom: 0;}

.row__feature-links__button:nth-child(2n+1) {grid-template-columns: 70% 30%;}
.row__feature-links__button:nth-child(2n+1) > a {grid-column: 2 / 3;}
.row__feature-links__button:nth-child(2n+1) .featured-link-description {grid-column: 1 / 2;}

/* On mobile, put descriptions underneath icons */
@media only screen and (max-width: 768px) {
    .row__feature-links__button > a, .row__feature-links__button:nth-child(2n+1) > a {grid-column: 1 / 3; grid-row: 1 / 2;}
    .row__feature-links__button .featured-link-description, .row__feature-links__button:nth-child(2n+1) .featured-link-description {grid-column: 1 / 3; grid-row: 2 / 3;}
}