@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
@import url("./root.css");
@import url("./reset.css");
@import url("./index.css");

body {
    margin: 0 auto;
    font-family: var(--ff-primary);
    font-size: var(--fs-200);
    font-weight: var(--fw-regular);
    color: var(--color-primary-700);
    overflow-x: hidden;
} 

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.container-standard {
    max-width: var(--max-width-desktop);
    margin: 0 auto;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.section{
    flex-direction: column;
    padding: 4rem 1rem;
    gap: 1rem;
    letter-spacing: 0.0625em;
}

.section__heading {
    font-size: var(--fs-400);
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    color: var(--color-primary-100);
}

.section__list {
    gap: 2.5rem;
}

.link {
  text-align: center;
  text-decoration: none;
  color: var(--clr-neutral-500);
}

.bold {
    font-weight: var(--fw-bold);
}

.section-components {
    background-color: var(--color-primary-800);
}

.section-components .section__heading {
    text-align: center;
    margin: 0 0 2rem 0;
    color: var(--color-primary-100);
}

.components-wrapper {
  display: grid;
  grid-gap: 1rem 1rem;
}

@media (min-width: 550px) {
    .components-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
        grid-gap: 1rem;
    }
}

.card {
  position: relative;
  display: grid;
  grid-template-rows: 15rem auto;
  font-size: var(--fs-100);
  font-weight: var(--fw-regular);
  overflow: hidden;
  border-radius: 0.5rem;
  transition: all ease-in 0.10s;
}

.card__link {
  display: block;
  color: var(--color-accent-500b);
  text-decoration: none;
}

.card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    filter: brightness(1); 
    transition: all 0.25s ease-in-out; 
}

.card__image:focus-within ,
.card__image:hover {
    transform: scale(1.15);
    filter: brightness(0.95) opacity(1); 
}

.card__description {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  text-align: center;
  background-color: var(--color-neutral-100);
}

.card__name {
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
}

.footer {
    padding: 1rem 0rem;
    border-top: 1px solid var(--color-primary-700);
    background-color: var(--color-primary-800)
}

ul.flex-center {
    gap: 0.5rem;
}

.list__item-icon {
    width: 3rem;
    height: 3rem;
    clip-path: circle(45%);
    transition: all ease-in 0.05s;
}

.list__item-icon:hover {
    transform: scale(1.15);
    animation: rotate-in 0.75s;
}

.footer section {
    padding: 0 1rem;
    font-size: var(--fs-100);
    color: var(--color-primary-100);
    justify-content: space-between;
}

.footer p:first-child {
    font-size: var(--fs-100);
    color: var(--color-primary-200);
    text-transform: uppercase;
}

@media screen and (min-width: 550px) {
    .footer p:first-child {
        text-transform: uppercase;
    }
}