@charset "utf-8";

img {
border-radius: 12px;
}

section {
display: flex;
flex-wrap: wrap;
gap: 0 60px;
margin: 0 auto;
width: var(--container);
}

article {
margin-bottom: 120px;
width: 360px;
}

h3 {
font-size: 2.1rem;
font-weight: 700;
line-height: 3.2rem;
margin: 24px 0 0 0;
}

h3 + p span:nth-of-type(1),
h3 + p span:nth-of-type(2) {
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.4rem;
letter-spacing: 0.2rem;
margin-bottom: 24px;
}

h3 + p span:nth-of-type(1) {
font-weight: 700;
}

h2.title, .title {
line-height: 0.5;
margin: 0;
padding: 0;
width: auto;
}

main {
margin-top: 340px;
}

main > div {
align-items: flex-end;
display: flex;
gap: 0 12px;
justify-content: flex-start;
margin: 60px auto;
width: var(--container);
}

.tagblock {
background: #F5CB36;
border-radius: 4px;
padding: 2px 8px;
font-size: 1.2rem;
height: auto;
}

@media screen and (max-width: 1400px) {

main {
margin-top: 24px;
}

main > div {
width: 90%;
gap: 24px;
margin: 60px auto 36px auto;
}

section {
gap: 24px;
width: 90%;
}

article {
justify-content: space-between;
margin-bottom: 60px;
width: 48%;
}

@media screen and (max-width: 800px) {

main > div {
align-items: center;
flex-direction: column;
width: 80%;
}

.tagblock {
display: inline-block;
}

section {
width: 80%;
}

article {
width: 100%;
}
}