/* main */

.container {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   text-align: center;
   background: var(--hero) center/cover no-repeat;
   background-blend-mode: screen;
   width: 100%;
   height: fit-content;
   min-height: calc(100vh - 2.75rem);
   padding: 6rem 0;
}

h2 {
   color: var(--defaultState);
   font-size: 1.4375rem;
   padding: 0 0.2rem;
   margin-top: 0;
   margin-bottom: 4rem;
   border: solid 0.075rem var(--defaultState);
   border-right: none;
   border-bottom: none;
   font-weight: var(--fw-bld);
}

.container > div + div {
   margin-top: 1.25rem;
}

.card-group {
   display: flex;
   flex-direction: column;
   border-radius: 4px;
}

.card {
   display: flex;
   align-items: center;
   width: 47.8125rem;
   height: 12rem;
   border-radius: 4px;
   background-color: var(--navbar);
   text-align: left;
}

.number {
   color: var(--text);
   font-family: var(--ff-secondary);
   font-size: var(--fsz-btn);
   align-self: flex-start;
   margin: var(--fsz-type) var(--fsz-hero__n1) auto var(--fsz-btn);
}

.description {
   line-height: 2;
}

.card-group h3 {
   color: var(--text);
   font-size: var(--fsz-ctgry);
   font-weight: var(--fw-blk);
}

.card-group h4 {
   color: var(--text);
   font-size: var(--fsz-type);
   font-weight: var(--fw-med);
   font-style: italic;
}

.description a {
   color: var(--defaultState);
}

.card-group h5 {
   font-family: var(--ff-secondary);
   font-size: var(--fsz-a-extrnl);
   color: var(--defaultState);
}

.card-group h5 svg {
   fill: var(--defaultState);
   height: 1.215rem;
   vertical-align: middle;
   margin-left: calc(-1.25rem + -0.5rem + (-0.5rem / 2));
   margin-right: 0.55rem;
}

.card > a {
   height: 12rem;
   margin-left: auto;
   object-fit: cover;
   border-left: var(--borderLeft);
   border-radius: 0 4px 4px 0;
}

.card > a img {
   height: 12rem;
   margin-left: auto;
}

.tools-used {
   margin-top: var(--fsz-tools);
   margin-bottom: calc(var(--fsz-tools) * 1.5);
   margin-left: calc(47.8125rem - 16rem);
   display: inline-flex;
   align-items: flex-start;
   justify-content: flex-start;
   width: 16rem;
}

h6 {
   color: var(--text);
   font-family: var(--ff-secondary);
   font-size: var(--fsz-tools);
   display: inline-block;
   margin-right: 0.78125rem;
}

.tools-used img {
   height: 1.5625rem;
}

.tools-used > img + img {
   margin-left: 0.390625rem;
}