.recommend .heading-component {
	@media (min-width: 769px) {
		padding-top: 0;
	}
	@media (max-width: 768px) {
		width: 100vw;
		margin-inline: calc(50% - 50vw);
	}
}

.recommend .heading-component .english {
  font-size: min(calc(100vw * (180 / 1280)), 180px);
  @media (max-width: 768px) {
		font-size: calc(100vw * (56 / 375));
  }
}

#recommend {
  width: 100%;
	background: #F2F4F7;
	padding-top: 100px;
	padding-inline: 40px;

	@media (max-width: 768px) {
		padding: calc(100vw * (50 / 375)) calc(100vw * (20 / 375)) 0;
	}

	.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: calc(100vw * (32 / 375));
			margin-top: calc(100vw * (10 / 375));
    }

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

			@media (max-width: 768px) {
				padding: calc(100vw * (22 / 375)) calc(100vw * (16 / 375));
			}

			.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: calc(100vw * (16 / 375));
				}
			}

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

				@media (max-width: 768px) {
					font-size: calc(100vw * (14 / 375));
				}
			}
		}
  }
}