/* Hero */

.hero {
    padding-block: var(--space-xl);
    text-align: center;
}

.hero__search {
    display: flex;
    align-items: center;
    max-width: 30rem;
    margin: var(--space-l) auto var(--space-2xl);
    border: 2px solid var(--body);
    padding: var(--space-3xs);
    background-color: #fff;
    border-radius: 999px;
}

.hero__search .hero__search-bar {
    flex: 1;
}

.hero__search .hero__search-bar .search-filter-input-text {
    border: 0;
}

.hero__search .btn.btn--primary {
    margin: 0;
    border-radius: 999px;
    padding-inline: var(--space-l);
}

.hero__search .btn.btn--primary button,
.hero__search .btn.btn--primary button:hover {
    background: transparent;
    padding: unset;
    border: unset;
    color: unset;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    font-size: var(--fs-0);
    line-height: 27px;
}

.hero__ratings {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: var(--space-s);
    border-top: 1px solid var(--line-grey);
    border-bottom: 1px solid var(--line-grey);
    padding-block: var(--space-m);
}

.hero__stars {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs)
}

.hero__stars .fa-star:nth-of-type(2),
.hero__stars .fa-star:nth-of-type(4) {
    transform: translateY(.5rem);
}

.hero__stars .fa-star:nth-of-type(1),
.hero__stars .fa-star:nth-of-type(5) {
    transform: translateY(1.5rem);
}

.hero__ratings p {
    margin: 0;
    font-size: var(--fs--1);
    line-height: var(--space-s);
    max-width: 80%;
    margin: auto;
}

/* Fold */

.fold {
    padding-block: var(--space-m) var(--space-3xl);
}

.fold__wrapper {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.fold__tile {
    
    padding: var(--space-s) var(--space-s);
    text-align: center;
    border-radius: .5rem;
    
}

.fold__tile h3 {
    font-size: var(--fs-1);
    line-height: var(--space-m);
    margin-top: var(--space-m);
}

/* Browse Categories */

.browse-categories {
    padding-bottom: var(--space-l);
    text-align: center;
}

.categories-list {
    list-style: none;
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(3, 1fr);
    padding: 0;
    margin-top: var(--space-l);
}

.categories-tile {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-m);
    background-color: #fff;
    text-align: left;
    text-decoration: none;
    border: 1px solid var(--line-grey);
    border-radius: .5rem;
    box-shadow: var(--shadow);
}

.categories-tile__description {
    font-size: var(--fs--1);
    line-height: var(--space-s);
    margin: 0;
}

.categories-tile__footer {
    display: flex;
    font-size: var(--fs--1);
    justify-content: space-between;
    align-items: center;    
}

@media (max-width: 768px) { 
    .categories-list {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* Call to action */

.secondary-cta__wrapper {
    background: var(--pink);
    background: var(--gradient-pink);
    background: var(--gradient-pink-moz);
    background: var(--gradient-pink-web);
    padding: var(--space-xl);
    border-radius: .5rem;
    box-shadow: var(--shadow);
    
}

.secondary-cta__content {
    max-width: 46rem;
    margin: auto;
    text-align: center;
    color: #fff;
}

.secondary-cta__content .btn {
    margin: auto;
}