#recommend {
  width: 100%;
	background-color: #f9f5f0;
	padding-block: 62px 80px;

	@media (max-width: 768px) {
		padding: 50px 20px 56px;
	}

	.cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(auto);
    gap: 40px;
		max-width: 900px;
		margin-inline: auto;

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      gap: 32px;
			margin-top: 10px;
    }

		.card {
			position: relative;
			background-color: #ffffff;
			padding: 32px 20px;

			@media (max-width: 768px) {
				padding: 22px 16px;
			}

			.card-tag {
				position: absolute;
				top: -20px;
				left: 20px;
				font-size: 1.8rem;
				font-weight: bold;
				line-height: 32px;
				letter-spacing: 0;
				color: #ffffff;
				background-color: #3f3e52;
				display: inline-block;
				height: 32px;
				padding-inline: 17.07px;
				clip-path: polygon(12.07px 0, 100% 0, calc(100% - 12.07px) 100%, 0 100%);

				@media (max-width: 768px) {
					font-size: 1.6rem;
				}
			}

			.card-text {
				font-size: 1.6rem;
				font-weight: 400;
				line-height: 1.6em;
				letter-spacing: 0;
				color: #000000;

				@media (max-width: 768px) {
					font-size: 1.4rem;
				}
			}
		}
  }
}