/**/
/* Components */
/**/



/**/
/* img Wrapper / loading spinner */
/**/

.img-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    display: none;
}

.img-wrapper .loading-spinner {
    position: absolute;
    height: 2em;
    width: 2em;
    border-radius: 50%;
    border: .2em solid #DFE2E4;
    border-top-color: #727B84;
    animation: spin 0.5s linear infinite;
}

.img-wrapper.loaded .loading-spinner {
    display: none;
}

.img-wrapper.loaded img {
    display: block;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}



/**/
/* Section Title */
/**/

.section-title {
    display: flex;
    flex-direction: column;
}

.section-title h2 {
    font-size: 1.75rem;
}

.section-title p {
    color: var(--clr-primary);
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: .5em;
}

.section-title .break {
    background: var(--clr-primary);
    height: .2em;
    width: 5em;
    margin-bottom: 1em;
    margin-top: 1em;
}

.section-title.alt {
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--min-padding);
    letter-spacing: .1em;
}

.section-title.alt p {
    color: black;
    font-size: 1.25rem;
}



/**/
/* Card */
/**/

.card {
    background: var(--clr-card);
    border-radius: var(--img-rounding);
    border: .2em #E5E5E5 solid;
    min-height: 7em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



/**/
/* Stars */
/**/

.stars {
    --star-size: 1.5em;
    margin-bottom: 1em;
    margin-top: .5em;
    display: flex;
}

.stars > div {
    width: var(--star-size);
    height: var(--star-size);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background: var(--clr-primary);
}



/**/
/* Capsule Button */
/**/

.capsule-button {
    background-color: var(--clr-primary);
    height: 2em;
    border-radius: 5em;
    padding: .5em 2em;
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    text-decoration: none;
    transition: color 150ms ease, background-color 150ms ease;
}

.capsule-button .image {
    width: 2em;
    height: 2em;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.capsule-button:hover,
.capsule-button:focus {
    background: var(--clr-highlight);
}

.capsule-button.clear {
    border: .2em #c7c7c7 solid;
    color: black;
    background-color: white;
}

.capsule-button.clear:hover,
.capsule-button.clear:focus {
    background-color: #c7c7c7;
}

.capsule-button:not(.clear):focus-visible {
    outline-color: white;
}

.capsule-button.sm {
    font-size: .8rem;
}



/* image-description container */

.image-desc {
    display: flex;
    align-items: center;
}

.image-desc .image {
    margin-right: 1em;
}

.image-desc p {
    flex: 1;
}

.image {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.image__size-sm {
    width: 2rem;
    height: 2rem;
}

.image__size-med {
    width: 4rem;
    height: 4rem;
}



/* desktop hover effects */

@media (hover: hover) and (pointer: fine) {


}


/* Phone tap animations */

@media (hover: none) and (pointer: coarse) {


}