.services { align-items: center; display: flex; justify-content: center; text-align: center; } .services__heading { font-size: 3.3rem; font-weight: 350; margin-bottom: 1.5rem; } .services__offers { display: grid; grid-template-areas: "matrix-heading git-heading boards-heading" "matrix-description git-description boards-description" "matrix-button git-button boards-button"; width: 80vw; padding: 0 10vw; } .services__offers__card__heading { font-weight: 350; font-size: 2rem; } .services__offers__card__description { margin-bottom: 1rem; margin: 0 3rem; } .services__offers_card__button { font-weight: 350; background: black; border: 0px; color: white; text-decoration: none; padding: 0.6rem 2rem; margin: 2rem 2.5rem; transition: 0.2s; } .services__offers_card__button:hover { border: 1px solid black; color: black; background: white; } .matrix-heading {grid-area: matrix-heading;} .matrix-description {grid-area: matrix-description;} .matrix-button {grid-area: matrix-button;} .git-heading {grid-area: git-heading;} .git-description {grid-area: git-description;} .git-button {grid-area: git-button;} .boards-heading {grid-area: boards-heading;} .boards-description {grid-area: boards-description;} .boards-button {grid-area: boards-button;}